如何从Express后端获取Firebase配置后执行initializeApp初始化

ES 模块的顶层代码是同步执行的，fetch 请求属于异步操作，回调的执行时机远远晚于模块导出逻辑，你写的导出 db、auth 代码运行时，app 还未完成赋值，自然会拿到 undefined 导致初始化失败。

第一步：封装异步初始化逻辑 #

修改 firebase.js 代码，将初始化逻辑封装为异步函数，缓存实例避免重复请求：

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";

// 缓存实例，避免重复初始化
let app, auth, db;
let initPromise;

// 对外暴露初始化方法，保证仅执行一次
export const initFirebase = async () => {
  // 已经初始化过直接返回实例
  if (app) return { app, auth, db };
  // 避免并发调用重复发起请求
  if (initPromise) return initPromise;
  
  initPromise = (async () => {
    const res = await fetch("/getapi");
    const configArr = await res.json();
    app = firebase.initializeApp({
      apiKey: configArr[0],
      authDomain: configArr[1],
      projectId: configArr[2],
      storageBucket: configArr[3],
      messagingSenderId: configArr[4],
      appId: configArr[5],
    });
    db = firebase.firestore();
    db.settings({
      timestampsInSnapshots: true,
      merge: true,
    });
    auth = app.auth();
    return { app, auth, db };
  })();
  return initPromise;
};

// 提供快捷getter，确保调用时已完成初始化
export const getApp = () => app;
export const getAuth = () => auth;
export const getDb = () => db;

第二步：项目接入使用 #

方案1：阻塞根渲染（最简单） #

在项目入口文件先等待 Firebase 初始化完成，再渲染整个应用，保证所有组件运行时 Firebase 都已就绪，以 React 项目为例：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { initFirebase } from './firebase';

initFirebase().then(() => {
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
});

后续组件中直接调用 getAuth()、getDb() 即可拿到对应实例。

方案2：Context 封装（不阻塞根渲染） #

如果不希望阻塞首屏加载，可以用 Context 封装初始化状态：
新建 FirebaseContext.js：

import { createContext, useContext, useEffect, useState } from 'react';
import { initFirebase } from './firebase';

const FirebaseContext = createContext(null);

export const FirebaseProvider = ({ children }) => {
  const [instance, setInstance] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const runInit = async () => {
      const res = await initFirebase();
      setInstance(res);
      setLoading(false);
    };
    runInit();
  }, []);

  if (loading) return <div>资源加载中...</div>;
  return <FirebaseContext.Provider value={instance}>{children}</FirebaseContext.Provider>;
};

export const useFirebase = () => useContext(FirebaseContext);

入口文件引入 Provider：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { FirebaseProvider } from './FirebaseContext';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <FirebaseProvider>
    <App />
  </FirebaseProvider>
);

组件中使用：

const Demo = () => {
  const { auth, db } = useFirebase();
  // 后续业务逻辑
};

可选优化：服务端接口调整 #

建议服务端返回配置对象而非数组，避免索引顺序出错导致配置匹配错误，修改 Express 接口：

app.get("/getapi", (req, res) => {
  res.send({
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.FIREBASE_APP_ID,
  });
});

对应前端初始化时直接用属性取值即可：

const config = await res.json();
app = firebase.initializeApp(config);

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