React前端如何导入Firebase SDK并调用HTTP可调用函数？

问题描述 #

我想在前端调用Firebase的HTTP可调用函数，但没法正确导入Firebase。查了官方文档还是有困惑，想问两个问题：

1. 是否需要在前端导入Firebase SDK才能访问已部署的Firebase Functions？
2. 如果需要，该怎么操作（我的网站已经托管在Firebase）；如果不需要，我还缺什么？

前端代码 #

import "../App.css";
import React, { useState } from "react";
import { getFunctions, httpsCallable } from "firebase/functions";    

const functions = require("firebase/functions");

export default function Navbar() {
  const getViewCount = firebase.functions().httpsCallable("getViewCount");
  getViewCount().then((result) => {
    console.log(result.data);
  });
}

后端Firebase Functions代码 #

exports.getViewCount = functions.runWith({ secrets: ["YOUTUBE_API"] }).https.onCall(async (data, context) => {
  const youtube = google.youtube({
    version: "v3",
    auth: process.env.YOUTUBE_API,
  });
  const { count } = await youtube.channels.list({
    id: process.env.YOUTUBE_CHANNEL_ID,
    part: "statistics",
  });
  const viewCount = count.items[0].statistics.viewCount;
  return {
    count: viewCount,
  };
});    

解答 #

问题1：是否需要导入Firebase SDK？ #

是的，必须在前端导入并初始化Firebase SDK才能调用HTTP可调用函数。这类函数依赖Firebase的身份验证、请求签名等机制，直接用普通HTTP请求调用会触发验证失败。

问题2：正确操作步骤（托管在Firebase的网站） #

1. 安装Firebase SDK依赖
   在项目根目录执行命令：

   npm install firebase
   

2. 初始化Firebase应用
   创建一个配置文件（比如firebaseConfig.js），填入从Firebase控制台获取的项目配置：

   // firebaseConfig.js
   import { initializeApp } from "firebase/app";
   
   const firebaseConfig = {
     apiKey: "你的API_KEY",
     authDomain: "你的AUTH_DOMAIN",
     projectId: "你的PROJECT_ID",
     storageBucket: "你的STORAGE_BUCKET",
     messagingSenderId: "你的MESSAGING_SENDER_ID",
     appId: "你的APP_ID"
   };
   
   const app = initializeApp(firebaseConfig);
   export default app;
   

3. 修正前端调用代码
   你的代码存在导入混用、未初始化Firebase就调用API的问题，修正后如下：

   import "../App.css";
   import React, { useEffect } from "react";
   import { getFunctions, httpsCallable } from "firebase/functions";
   import app from "./firebaseConfig"; // 导入初始化好的Firebase应用
   
   export default function Navbar() {
     // 用useEffect包裹，避免组件重复渲染时重复发起请求
     useEffect(() => {
       const functions = getFunctions(app);
       const getViewCount = httpsCallable(functions, "getViewCount");
       
       getViewCount()
         .then((result) => {
           console.log(result.data);
         })
         .catch((error) => {
           console.error("调用函数失败:", error);
         });
     }, []);
   
     return (
       <nav>
         {/* 你的Navbar组件内容 */}
       </nav>
     );
   }
   

关键错误说明 #

• 同时混用了ES模块的import和CommonJS的require，导致导入逻辑混乱；
• 没有初始化Firebase应用就直接调用firebase.functions()，此时firebase对象根本不存在；
• 在组件顶层直接调用函数会导致每次组件渲染都执行请求，用useEffect包裹才能确保请求只执行一次。

内容的提问来源于stack exchange，提问作者bagel_boy3