Firebase v9网页版出现Expected first argument to collection()报错求助

• 核心问题是你传入collection()方法的第一个参数db不符合要求：该参数必须是FirebaseFirestore实例、CollectionReference实例或者DocumentReference实例，你当前的db不是上述合法类型
• 常见触发场景：
  • 没有正确完成Firebase v9的初始化流程，未通过getFirestore()生成合法的Firestore实例
  • 初始化后导出db的逻辑错误，或者业务代码中引入db的路径错误，导致拿到的db是undefined或者其他非法值

1. 先修正Firebase初始化逻辑，确保生成合法的db实例，示例代码如下：

/* 单独的Firebase配置文件，例如/src/utils/firebase.js */
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

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

const app = initializeApp(firebaseConfig);
// 这里生成的db就是合法的FirebaseFirestore实例
export const db = getFirestore(app);

2. 确保业务代码中引入db的路径正确，例如：
   import { db } from './utils/firebase'; 路径需和你实际的配置文件位置对齐
3. 额外优化你现有业务代码的问题：当前useEffect未添加依赖数组，也没有做监听销毁逻辑，会导致重复触发监听、内存泄漏，优化后代码如下：

import { query, collection, onSnapshot } from "firebase/firestore";
import { useState, useEffect } from "react";

const [posts, setPosts] = useState([]);

useEffect(() => {
  const q = query(collection(db, "posts"));
  const unSubscribe = onSnapshot(q, (querySnapshot) => {
    setPosts(
      querySnapshot.docs.map((doc) => ({ id: doc.id, data: doc.data() }))
    );
  });
  // 组件卸载时清除快照监听
  return () => unSubscribe();
}, []); // 空依赖数组保证只在组件首次挂载时执行一次监听

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