Firestore获取集合计数失效，报TypeError错误求助

问题背景 #

我编写代码尝试获取Firestore中已支付状态的发票数量，但运行时抛出了TypeError: Cannot read properties of undefined (reading '_t')错误。

相关代码 #

核心业务代码 #

import { getCountFromServer } from 'firebase/firestore'
useEffect(()=> {
    const getCount = async () => {
        const collection = userDB().collection('invoices')
        const query = collection.where('status', '==', 'paid')
        const snapshot = await getCountFromServer(query)
        setCount(snapshot.data().count)
    }
    getCount().catch(err=> console.log(err))
}, [user, collectionRef, filterKey, filterValue])

说明：userDB()等价于db.collection('users').doc(userid)

userDB定义 #

export const userDB = () => {
  let user = auth.currentUser
  return db.collection('users').doc(user?.uid)
}

Firebase初始化代码 #

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

const  firebaseApp = firebase.initializeApp ({
    ...keys
});

export const Providers = {
    google: new firebase.auth.GoogleAuthProvider(),
};

const db = firebaseApp.firestore()
const auth = firebase.auth();
const Fire = firebaseApp

export  {db, Fire, auth}

错误信息 #

TypeError: Cannot read properties of undefined (reading '_t')
    at gn (index.esm2017.js:4251:1)
    at bu (index.esm2017.js:13685:1)
    at Ca.run (index.esm2017.js:16797:1)
    at index.esm2017.js:20050:1

环境信息 #

• Firebase版本："firebase": "^9.15.0"

原因分析及解决方法 #

根本原因 #

你混合使用了Firestore的Compat版本（v8兼容写法）和Modular版本（v9模块化写法）：

• 初始化代码用的是firebase/compat/firestore（Compat模式）
• 聚合查询用的是getCountFromServer（Modular模式专属API）

两种模式的API不兼容，导致传入的查询对象不符合Modular API的要求，从而抛出错误。

解决方法 #

两种方案二选一即可：

方案1：统一使用Compat版本API

将聚合查询替换为Compat模式的写法，通过get()获取快照后用size统计数量（注意：数据量较大时，该方法会读取所有匹配文档，成本较高）：

useEffect(()=> {
    const getCount = async () => {
        const collection = userDB().collection('invoices')
        const querySnapshot = await collection.where('status', '==', 'paid').get()
        setCount(querySnapshot.size)
    }
    getCount().catch(err=> console.log(err))
}, [user, collectionRef, filterKey, filterValue])

方案2：统一使用Modular版本API

1. 修改Firebase初始化代码为Modular模式：

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

const firebaseApp = initializeApp({
    ...keys
});

export const Providers = {
    google: new GoogleAuthProvider(),
};

const db = getFirestore(firebaseApp);
const auth = getAuth(firebaseApp);
const Fire = firebaseApp;

export { db, Fire, auth };

2. 修改userDB为Modular模式写法：

import { doc, collection } from "firebase/firestore";
import { db, auth } from "./你的初始化文件路径";

export const userDB = () => {
  const user = auth.currentUser;
  return doc(collection(db, "users"), user?.uid);
};

3. 修改核心业务代码为Modular模式：

import { getCountFromServer, collection, query, where } from 'firebase/firestore';
import { userDB } from './你的userDB路径';

useEffect(()=> {
    const getCount = async () => {
        if (!auth.currentUser?.uid) return; // 先判断用户是否已登录，避免无效引用
        const invoicesCol = collection(userDB(), 'invoices');
        const q = query(invoicesCol, where('status', '==', 'paid'));
        const snapshot = await getCountFromServer(q);
        setCount(snapshot.data().count);
    }
    getCount().catch(err=> console.log(err))
}, [user, collectionRef, filterKey, filterValue])

额外提示：userDB中当user?.uid为undefined时，会生成无效的文档引用，建议调用前先判断用户登录状态，避免后续报错。

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