React项目配置Firebase时报错No Firebase App '[DEFAULT]' has been created

错误原因 #

你混用了Firebase 9+的新版模块化API和compat兼容版旧API两套体系：你用新版initializeApp初始化的实例没有同步到compat层的全局firebase对象上，调用firebase.auth()、firebase.firestore()时，compat层找不到已初始化的默认App实例，就抛出该错误。

解决方案 #

二选一即可，不要混用两套API

方案1：统一使用compat兼容版写法（适配旧项目代码） #

删掉新版模块化API的导入，改用compat版方法初始化，完整代码如下：

import firebase from 'firebase/compat/app';
import 'firebase/compat/analytics';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
  apiKey: "AIzaSyD0rxJTIV4RIKfdFJB6G--9md2-SAEDwjs",
  authDomain: "chat-app-d3f09.firebaseapp.com",
  projectId: "chat-app-d3f09",
  storageBucket: "chat-app-d3f09.appspot.com",
  messagingSenderId: "361125159681",
  appId: "1:361125159681:web:9557ff40c4e38e30ba3100",
  measurementId: "G-X1Q63CL2N2"
};

firebase.initializeApp(firebaseConfig);
const analytics = firebase.analytics();
const auth = firebase.auth();
const db = firebase.firestore();

export { db, auth, analytics }
export default firebase

方案2：统一使用新版模块化API（官方推荐，打包体积更小） #

完全弃用compat相关导入，改用新版模块化方法获取服务实例，完整代码如下：

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "AIzaSyD0rxJTIV4RIKfdFJB6G--9md2-SAEDwjs",
  authDomain: "chat-app-d3f09.firebaseapp.com",
  projectId: "chat-app-d3f09",
  storageBucket: "chat-app-d3f09.appspot.com",
  messagingSenderId: "361125159681",
  appId: "1:361125159681:web:9557ff40c4e38e30ba3100",
  measurementId: "G-X1Q63CL2N2"
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const auth = getAuth(app);
const db = getFirestore(app);

export { db, auth, analytics }

注意事项 #

• 两套API体系不要混用，导入和初始化逻辑要统一
• React项目中要确保该配置文件在所有使用Firebase服务的代码之前被导入，避免出现初始化晚于服务调用的情况

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