Firebase v9使用onSnapshot监听文档变更报Expected type 'Tc'错误如何解决

该报错的核心诱因是传入onSnapshot方法的参数类型不符合Firebase v9的预期，方法期望接收CollectionReference、DocumentReference或者Query类型的实例，你实际传入的是不匹配类型的对象，常见触发场景有两个：

• 初始化的db实例类型错误：混用了Firebase v8版本的命名空间导出逻辑，或者初始化Firestore时导出的不是v9模块化语法要求的Firestore实例
• 方法导入路径不匹配：从firebase/firestore/lite包导入了collection、onSnapshot方法，但初始化的db是全量firebase/firestore包生成的实例，两类实例互不兼容，触发类型校验报错

1. 先确认Firebase初始化逻辑为v9模块化写法，导出正确的db实例：

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

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

const app = initializeApp(firebaseConfig);
// 确保导出的是全量Firestore实例
export const db = getFirestore(app);

2. 确认业务代码中相关方法的导入路径和getFirestore的导入路径完全一致，不要混用lite包和全量包：

// 正确导入，和getFirestore同属全量firestore包
import { collection, onSnapshot } from "firebase/firestore";

3. 你提供的代码还缺少useEffect销毁时取消监听的逻辑，会引发内存泄漏，补充后的完整业务代码如下：

const [channels, setChannels] = useState([]);
useEffect(() => {
    const rooms = collection(db, 'rooms');
    const unsub = onSnapshot(rooms, (snapshot) => {
        setChannels(snapshot.docs.map(doc => ({
            id: doc.id,
            name: doc.data().name
        })))
    },
    (error) => {
      console.log(error)
    });
    // 组件卸载时取消快照监听
    return () => unsub();
}, []);

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