如何从反应组件中调用 firebase 函数

Question

我正在尝试研究如何从 react 组件中调用 firebase 函数。

反应组件...

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 功能，但我根本找不到它。

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)}`);
    });
}

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)}`);
    });
}