Firebase v9版本中如何实现Firestore集合内的文档排序

Firebase 9 采用模块化API设计，排序需要和query方法组合使用，你已经提前导入了所需的orderBy、query依赖，仅需调整useEffect中的查询逻辑即可：

具体修改步骤 #

• 首先构建带排序规则的查询实例，你可以根据需求指定排序字段、升降序规则，以下示例按消息创建时间createdAt倒序排列（最新消息排在最前），可以根据实际业务替换排序字段
• 将构建好的查询实例传入onSnapshot方法即可实现带排序的实时监听

修改后的完整代码段 #

import React, { useState, useEffect } from "react";
import SignOut from "./SignOut";
import { Grid, Typography, Avatar } from "@material-ui/core";
import db from "../firebase";
import { onSnapshot, collection, orderBy, query, limit } from "firebase/firestore";
import SendMessage from "./SendMessage";

function ChatBox() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    // 构建带排序的查询，第二个参数asc为升序，desc为降序
    const q = query(
      collection(db, "messages"),
      orderBy("createdAt", "desc")
      // 有需要还可以叠加limit、where等条件，比如limit(50)仅取最新50条消息
    );
    // 把查询实例传入onSnapshot
    onSnapshot(q, (snapshot) => {
      // 补充doc.id的取值逻辑，避免渲染时key对应的id为undefined
      setMessages(snapshot.docs.map((doc) => ({...doc.data(), id: doc.id})));
    });
  }, []);
  return (
    <>
      <Grid container>
        <Grid item xs="12" style={{ textAlign: "right" }}>
          <SignOut></SignOut>
        </Grid>
        {messages.map(({ id, text, photoURL }) => (
          <Grid item xs="12" key={id} style={{ marginBottom: "1rem" }}>
            <Avatar alt="" src={photoURL} />
            <Typography>{text}</Typography>
          </Grid>
        ))}
      </Grid>
      <Grid container>
        <SendMessage></SendMessage>
      </Grid>
    </>
  );
}

export default ChatBox;

注意事项 #

• 排序用的字段需要在messages集合的所有文档中存在，否则会触发查询报错
• 如果首次运行出现索引缺失提示，按照控制台的提示创建对应索引即可，索引创建完成后查询即可正常运行

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