React配置Firestore时报@firebase/app无默认导出错误如何解决

错误原因 #

该报错是因为你安装的Firebase为v9及以上的模块化版本，原有配置代码使用的是v8及更早版本的命名空间式导入语法，新旧版本API不兼容导致。

解决方法 #

你可以根据需求选择以下任意一种方案修复：

• 方案1：使用兼容层快速修复，无需调整后续业务代码
  将配置文件的前两行导入语句替换为兼容版本导入即可：

// 替换原有导入为compat兼容版本
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';

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

firebase.initializeApp(firebaseConfig);

export const db = firebase.firestore();
export default firebase;

修改后原有的导入和Firestore调用逻辑可以保持不变。

• 方案2：适配v9+模块化API（推荐）
  模块化API支持Tree Shaking，能有效减小打包体积，性能更优，需要修改配置文件写法：

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

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

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export default app;

注意：采用该方案后，后续Firestore相关的调用语法也需要同步更换为模块化写法，例如原db.collection('test').get()需要调整为getDocs(collection(db, 'test'))。

额外注意事项 #

确保你导入配置文件的路径填写正确，如果fbconfig.js是你在项目src目录下创建的本地配置文件，导入时需要写相对路径：

import firebase from './fbconfig';

未加相对路径前缀的写法会默认到node_modules目录下查找依赖，会引发额外的导入错误。

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