如何在React组件内调用Firebase函数

Question

我正试图弄清楚如何在React组件内调用Firebase函数。

React组件...

import React from 'react';
import './App.css';
import functions from '../functions/index'

function App() {

    const callFirebaseFunction = event =>{
        var output = functions.returnMessage()
        console.log(output)
    }

    return(
        <div>
            <button onClick={event => callFirebaseFunction()}>call function button</button>
        </div>    
    )

firebase函数index.js...

const functions = require('firebase-functions');

exports.returnMessage = functions.https.onCall((data, context) => {
    return {
        output: "the firebase function has been run"
      }
});

希望我的代码可以解释我想做的事情。如果我在这个非常简单的示例中犯了其他错误，请随意更正。

我遇到的问题是，我无法导入位于src文件夹外部的任何组件，而Firebase函数就在此范围之外。我不想强制退出任何东西，因为我认为有一种适当的方式可以让我访问我的Firebase函数，但我无法找到它。

- Thomas Fox

---

为什么不把你的代码移动到“src”文件夹中呢？ - azium

Firebase 以某种原因抱怨我这样做。我尝试了一下，遇到了几个不同的问题，虽然我记不清它们是什么了。我会再次这样运行它，以找出问题所在。 - Thomas Fox

我猜你的React应用是使用create-react-app创建的？除非你也在编写一些服务器端代码，否则在src文件夹中编写所有代码不应该有任何问题。请更新你的问题，包括与此相关的错误信息。 - azium

是的，你说得对。Firebase函数算作服务器端代码吗？我会在几分钟内添加一些错误。 - Thomas Fox

哦，我刚查了一下，是的，这完全是一个Node.js的问题。你不能将这些函数导入到你的React应用程序中，这毫无意义。即使你可以，它也不会有任何作用...你实际上想做什么？ - azium

Answer 1

根据文档，您需要在客户端使用Firebase库来调用可调用函数。您不应导入服务器端函数代码，该代码需要单独部署到Firebase函数-- 它不会在应用程序的客户端重复使用。

假设您已经正确将Firebase客户端SDK导入到客户端代码中，这意味着我们可以像这样修改callFirebaseFunction：

const callFirebaseFunction = event => {
    const callableReturnMessage = firebase.functions().httpsCallable('returnMessage');

    callableReturnMessage().then((result) => {
      console.log(result.data.output);
    }).catch((error) => {
      console.log(`error: ${JSON.stringify(error)}`);
    });
}

注意：由于此问题最初提出时使用的Firebase版本以及调用样式的方法，本答案使用“Web版本8（命名空间）”方法。自那时以来，还有一个“Web版本9（模块化）”样式（在文档链接中），可能更为适合。（请参见此答案。）

- robsiemb

Answer 2

随着现代Firebase SDK的发布，文档已经更新，与被接受的答案链接。这意味着代码现在应该是：

import { getFunctions, httpsCallable } from "firebase/functions";

const callFirebaseFunction = event => {
    const functions = getFunctions();
    const callableReturnMessage = httpsCallable(functions, 'returnMessage');

    callableReturnMessage().then((result) => {
      console.log(result.data.output);
    }).catch((error) => {
      console.log(`error: ${JSON.stringify(error)}`);
    });
}

- Castello Developer

---

关于您对目前被接受的答案所做的编辑，建议先阅读一下这篇 Meta.SO 帖子。如果您要更新新版本的信息，请保留原始答案并添加一个新的“适用于X版本”的部分，或者像您在这里所做的一样，添加另一个答案。 - samthecodingman

Answer 3

我刚刚将Firebase从^4.8.0升级到^7.21.0

现在我能够使用httpsCallable

- Vishal Chavan