在React JS中如何正确导入Firebase模块调用initializeApp完成初始化

问题原因 #

你代码同时存在三类错误：

• 混用Firebase v8的命名空间API和v9的模块化API，两套API不兼容，调用firebase.auth()时未给全局firebase对象传入配置直接触发报错
• getAnalytics() 初始化必须传入已创建的firebaseApp实例，缺失参数会初始化失败
• fire.tsx 中firebaseApp为默认导出，但App.tsx中使用命名导入，实际导入结果为undefined

修正后的代码 #

fire.tsx 完整代码（统一使用v9模块化API，兼容客户端环境）

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getAnalytics, isSupported } from "firebase/analytics";

const firebaseConfig = {
  apiKey: "xxx-xx-xx",
  authDomain: "xxx-xx-xx",
  databaseURL: "xxx-xx-xx",
  projectId: "xxx-xx-xx",
  storageBucket: "xxx-xx-xx",
  messagingSenderId: "xxx-xx-xx",
  appId: "xxx-xx-xx",
  measurementId: "xxx-xx-xx"
};

const firebaseApp = initializeApp(firebaseConfig); 
export const firebaseAuth = getAuth(firebaseApp);
// 兼容无Analytics支持的环境，避免服务端渲染/老旧浏览器报错
export const firebaseAnalytics = isSupported() ? getAnalytics(firebaseApp) : null;
export { firebaseApp };

App.tsx 导入代码

// 现在所有导出都是命名导出，可直接按此导入
import { firebaseApp, firebaseAnalytics } from './fire';

接入说明 #

ES模块导入时会优先执行导入文件的顶层代码，你现在的接入方式就正确：只要在App.tsx顶部导入fire.tsx的导出内容，Firebase初始化逻辑会自动在应用启动时执行，不需要额外调用初始化方法。

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