React报错：'db'未从'../firebase'导出，是否为导入导出方式错误？

问题原因 #

这个编译错误完全由导出环节的配置遗漏导致，你的导入语法没有问题，错误提示明确说明../firebase文件中没有对外导出名为db的变量。

排查&解决步骤 #

1. 打开项目中../firebase路径对应的配置文件，检查是否完成Firestore的初始化与导出，Firebase v9+模块化版本的完整导出参考代码如下：

// firebase.js 完整示例
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// 替换为你自己的Firebase项目配置
const firebaseConfig = {
  apiKey: "xxx",
  authDomain: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx",
  appId: "xxx"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const provider = new GoogleAuthProvider();
export const storage = getStorage(app);
// 下方是大概率遗漏的内容：初始化db实例并导出
export const db = getFirestore(app);

2. 检查常见配置错误：

• 遗漏了import { getFirestore } from "firebase/firestore"这行引入语句
• 初始化Firestore实例后没有加export关键字对外暴露
• 导出的变量名和导入的db不匹配，比如误写为export const firestore = getFirestore(app)

按上述步骤修正后重新编译即可解决错误。

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