React Firebase Hooks无法使用limit/where方法问题求助

你的问题出在误用了Firebase v8的链式调用语法，而你当前使用的是Firebase v9模块化API，两者的查询构建方式完全不同。

错误原因 #

Firebase v9采用模块化设计，不再支持query(collectionRef).limit(5)这种链式调用写法，所有查询条件（limit/where/orderBy等）都需要作为独立函数导入，然后作为参数传递给query函数。

修正后的代码 #

首先确保导入所需的Firestore方法，再调整查询构建方式：

import app from "../api/firebase";
import { collection, getFirestore, query, limit } from "firebase/firestore";
import { useCollectionData } from "react-firebase-hooks/firestore";

// ...

const collectionRef = collection(getFirestore(app), 'clients');
// 将limit作为query的第二个参数传入
const queryRef = query(collectionRef, limit(5));

const [clients = [], loading, error] = useCollectionData(
  queryRef,
  {
    snapshotListenOptions: { includeMetadataChanges: true },
  }
);

扩展：使用where条件的示例 #

如果需要添加where过滤，同样遵循模块化写法：

import { collection, getFirestore, query, limit, where } from "firebase/firestore";

// ...

const queryRef = query(
  collectionRef,
  where('status', '==', 'active'), // 添加where条件
  limit(5) // 多个条件按顺序传入query
);

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