Firebase集合排序与限制：orderBy与limit代码位置咨询

从指定Firebase集合collectiondb/id/users中获取数据，该集合包含100余条记录，需按rank字段排序并限制返回数量，请问应将orderBy与limit操作添加至以下代码的哪个位置？

原监听代码：

useEffect(
    () =>
      onSnapshot(collection(db, "collectiondb/id/users"), (snapshot) =>
        setLeaders(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
      ),
    []
  );

后续数据渲染相关代码：

const [leaders, setLeaders] = useState([{ name: "Loading...", id: "initial" }]);

<ul type='1'>
        {leaders.map((leader) => (
          <li>
              {leader.rank} {leader.name}
          </li>
        ))}
</ul>

你需要把orderBy和limit通过query方法链式绑定在collection()之后，作为查询条件传入onSnapshot，具体修改后的代码如下：

// 确保导入所需的Firestore方法
import { collection, onSnapshot, orderBy, limit, query } from "firebase/firestore";

useEffect(
    () =>
      onSnapshot(
        // 在这里添加排序和限制逻辑
        query(collection(db, "collectiondb/id/users"), orderBy("rank"), limit(10)), // 10为限制返回的数量，可按需调整
        (snapshot) =>
          setLeaders(snapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
      ),
    []
  );

关键说明 #

• 必须导入query方法来组合collection、orderBy和limit的逻辑，Firestore不支持直接在collection后链式调用排序/限制方法。
• 首次运行时Firebase控制台会提示创建rank字段的索引，直接复制提示中的链接完成索引创建即可，否则排序功能无法生效。
• limit()的参数可根据需求修改，比如要返回前20条数据就写limit(20)。

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