如何解决FirebaseError: collection()第一个参数类型不符合要求的问题

核心问题1：Firestore SDK版本混用 + 功能不匹配 #

你在firebase.ts中初始化用的是 Firestore Lite 轻量版（从firebase/firestore/lite导入getFirestore），但在自定义hook中调用的doc、onSnapshot都是从完整的firebase/firestoreSDK导入的，两者的实例类型不兼容，所以会报错参数类型不符合要求。
另外Firestore Lite本身就不支持onSnapshot实时监听功能，它只支持单次数据查询，这也是触发报错的直接原因。

核心问题2：Firebase初始化逻辑存在缺陷 #

你写的初始化判断if (!getApps.length)是错误的：getApps是一个返回已初始化应用数组的方法，直接取getApps.length拿到的是函数本身的参数长度，永远为0，会导致重复初始化风险。同时如果已经存在初始化的应用，你的firebaseApp变量会是undefined，后续调用getFirestore等方法时会传参异常。

解决方案（二选一即可） #

方案A：需要实时监听功能（保留onSnapshot）

直接把Firestore Lite替换为完整版本的Firestore SDK，修改firebase.ts的导入即可：
把原来的

import { getFirestore } from 'firebase/firestore/lite'

修改为

import { getFirestore } from 'firebase/firestore'

同时修正初始化逻辑，避免出现undefined：

// 替换原来的初始化判断代码
const firebaseApp = getApps().length ? getApps()[0] : initializeApp(firebaseConfig)

方案B：不需要实时监听，保留Firestore Lite

把hook中的onSnapshot实时监听逻辑替换为Lite支持的单次查询getDoc：

// 导入改为从lite引入
import { doc, getDoc } from 'firebase/firestore/lite'

// 替换原来的onSnapshot逻辑
useEffect(() => {
  onAuthStateChanged(auth, async (user) => {
    if (user) {
      setCurrentUser(user)
      try {
        const docRef = doc(fireStore, 'users', user.uid)
        const docSnap = await getDoc(docRef)
        setUsername(docSnap.data()?.username)
      } catch (e) {
        console.log(e.message)
      }
    } else {
      setCurrentUser(null)
      setUsername(null)
    }
  })
}, [])

额外优化点 #

你当前useEffect的依赖项填了currentUser，但onAuthStateChanged本身就会监听用户登录状态的变化，依赖项改为空数组即可，避免重复触发监听逻辑。

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