React中firebase/app导入报错：'app'未导出，求解决方法

错误原因 #

问题出在Firebase版本不兼容：你安装的是Firebase v9+版本，但代码仍使用v8及以下的命名空间式导入写法。v9+采用了全新的模块化API结构，不再支持import firebase from "firebase/app"这类默认导入方式，因此触发了导出错误。

解决方案 #

方案1：适配Firebase v9+模块化写法（推荐） #

修改你的firebase.js文件为模块化导入模式，这是Firebase官方推荐的最新写法：

// 导入Firebase模块化API
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
};

// 初始化Firebase应用
const app = initializeApp(firebaseConfig);

// 导出auth和firestore实例
export const auth = getAuth(app);
export const db = getFirestore(app);
export default app;

之后在组件中导入时，使用对应模块化导出：

import { auth, db } from "./firebase";

方案2：降级到Firebase v8版本（临时过渡） #

如果暂时不想修改代码结构，可以卸载当前版本，安装v8.x稳定版：

npm uninstall firebase
npm install firebase@8.10.0

安装完成后，你的原有代码即可正常运行。

额外注意事项 #

• 方案1中必须手动导出db实例，否则其他组件无法正确导入db；
• 检查.env文件中的环境变量是否配置正确，确保所有Firebase配置项能被React项目正常读取。

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