React连接Firebase时遇export 'firestore'未找到错误，如何解决？

问题根源 #

你的firebase_setup/firebase文件仅导入了Firebase模块，但没有初始化应用实例，也没有导出Firestore实例，导致其他文件无法导入firestore。

步骤1：修正firebase_setup/firebase文件 #

更新代码，完成Firebase应用初始化并导出Firestore实例：

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

// 替换为你的Firebase项目配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

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

// 初始化并导出Firestore、Auth实例
export const db = getFirestore(app);
export const auth = getAuth(app);

步骤2：修正handleSubmit文件的导入逻辑 #

替换原有导入代码，使用正确的导出实例：

import { addDoc, collection } from "firebase/firestore";
import { db } from "../firebase_setup/firebase"; // 导入修正后的db实例

// 示例：提交数据到Firestore的逻辑
async function handleSubmit() {
  try {
    await addDoc(collection(db, "your-collection-name"), {
      // 填入你要提交的数据
      name: "示例数据",
      createdAt: new Date()
    });
  } catch (error) {
    console.error("提交失败: ", error);
  }
}

额外说明 #

• 你之前尝试的import * as firebase from './firebase'被灰显，是因为导入后未使用firebase对象内的任何内容，修正导出逻辑后，只要调用firebase.db或firebase.auth这类导出项，警告就会消失。
• 建议统一使用Firebase v9+的模块化API（即import { xxx } from "firebase/xxx"），避免混用compat版本，减少版本兼容问题。

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