React+Firebase项目CRUD操作报错：collection()参数无效

问题详情 #

在React+Firebase应用中执行CRUD操作时触发以下错误：

FirebaseError: [code=invalid-argument]: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

尝试过firebase/firestore/lite相关方案但未解决。

相关代码 #

firebase-config.js

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

const firebaseConfig = {
  apiKey: "some-key",
  authDomain: "auth-domain",
  projectId: some-projectId,
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export { db };

index.js

import {
  collection,
  query,
  onSnapshot,
  addDoc,
  Timestamp,
} from "firebase/firestore";
import { db } from "../../firebase-config";
import * as React from "react";
import { useState, useEffect } from "react";

export default function MortgageCard() {
   const [mortgages, setMortgages] = useState([])
   useEffect(() => {
console.log("db connection: ", db);
     const q = query(collection(db, 'mortgage')) // 应用在此处崩溃
     onSnapshot(q, (querySnapshot) => {
       setMortgages(querySnapshot.docs.map(doc => ({
         id: doc.id,
         data: doc.data()
       })))
     })
   }
 ,[])
}

console.log(db)输出 #

{
    "app": {
        "_isDeleted": false,
        "_options": {
            "apiKey": "AIzaSyCYCMv7wPaVC8J7RQo1LWCtGI0KjdGY25M",
            "authDomain": "anrack-d8e3d.firebaseapp.com",
            "projectId": "anrack-d8e3d",
            "storageBucket": "anrack-d8e3d.appspot.com",
            "messagingSenderId": "1000495980159",
            "appId": "1:1000495980159:web:f2a3f38e084c377ac6694a"
        },
        "_config": {
            "name": "[DEFAULT]",
            "automaticDataCollectionEnabled": false
        },
        "_name": "[DEFAULT]",
        "_automaticDataCollectionEnabled": false,
        "_container": {
            "name": "[DEFAULT]",
            "providers": {}
        }
    },
    "databaseId": {
        "projectId": "anrack-d8e3d",
        "database": "(default)"
    },
    "settings": {
        "host": "firestore.googleapis.com",
        "ssl": true,
        "ignoreUndefinedProperties": false,
        "cacheSizeBytes": 41943040,
        "experimentalForceLongPolling": false,
        "experimentalAutoDetectLongPolling": false,
        "useFetchStreams": true
    }
}

解决方案 #

• 统一Firebase依赖版本
  确保项目中所有Firebase相关包版本一致，避免混用完整版和lite版导致实例不兼容。执行命令更新到最新版本：

  npm install firebase@latest
  

• 保持导入模块一致性
  所有Firestore操作方法（collection、query、onSnapshot等）必须与初始化db的包来源一致：

  • 若使用完整版Firestore，保持现有导入（均来自firebase/firestore）
  • 若切换到lite版，需同步修改所有导入为firebase/firestore/lite：

    // firebase-config.js
    import { getFirestore } from "firebase/firestore/lite";
    // index.js
    import { collection, query, onSnapshot } from "firebase/firestore/lite";
    

• 验证导入路径正确性
  确认index.js中db的导入路径../../firebase-config无误，避免因路径错误导致导入无效对象。

• 清除缓存重启服务
  缓存可能导致模块加载异常，执行以下操作重置缓存并重启：

  npm start -- --reset-cache
  

  或删除依赖文件后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

内容的提问来源于stack exchange，提问作者Muhammad Huzaifa Nasir