React连接最新版Firebase时报找不到'/src/firebase-config.js'相对路径下的firebase模块

你遇到的报错是因为当前使用的Firebase 9及以上版本采用了模块化API设计，不再支持旧版本的命名空间导入写法，旧教程的配置逻辑和新版本语法不兼容。

修复步骤 #

• 第一步：确认依赖已正确安装
  运行如下命令安装最新版Firebase：

  npm install firebase
  # 或使用yarn
  yarn add firebase
  

• 第二步：修改firebase-config.js配置文件语法
  替换原有命名空间导入写法，使用新的模块化导入规则：

  // firebase-config.js
  import { initializeApp } from "firebase/app";
  import { getFirestore } from "firebase/firestore";
  
  const firebaseConfig = {
      apiKey: "AIzaSsdfsdfBbWj6IbdKr0la5cx4k75fcS_qvMU",
      authDomain: "todo-app-8sdf10.firebaseapp.com",
      projectId: "todo-app-sdf110",
      storageBucket: "todo-app-8sdf10.appspot.com",
      messagingSenderId: "26sdfreact6661358",
      appId: "1:260256sdf358:web:99eafsdfbd6099cb748b7f",
      measurementId: "G-EH6HsdfHRD5R"
  };
  
  // 初始化Firebase实例
  const app = initializeApp(firebaseConfig);
  // 初始化Firestore数据库实例
  const db = getFirestore(app);
  
  export default db;
  

• 第三步：修改App.js中的数据库调用逻辑
  新版本Firebase所有操作函数均为单独导入，原db.collection写法不再生效，调整代码如下：

  // App.js 顶部新增导入
  import { collection, onSnapshot } from "firebase/firestore";
  
  // 修改useEffect内逻辑
  useEffect(() => {
    // 绑定todos集合监听
    const todoCollection = collection(db, "todos");
    const unsubscribe = onSnapshot(todoCollection, snapshot => {
      console.log(snapshot.docs.map(doc => doc.data()));
      setTodos(snapshot.docs.map(doc => doc.data().todo))
    })
    // 组件卸载时取消监听，避免内存泄漏
    return () => unsubscribe();
  }, [])
  

兼容旧写法方案 #

如果不想调整已有代码，可以使用Firebase提供的兼容包，仅需修改firebase-config.js的导入语句即可：

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

// 原有配置逻辑不需要改动
const firebaseApp = firebase.initializeApp({
  // 你的配置项
});
const db = firebaseApp.firestore();
export default db;

注：兼容包仅用于过渡，建议优先使用新的模块化写法，可有效减少最终打包体积

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