如何在React中使用Firestore子集合的orderBy按时间戳排序

你的代码目前只是获取了子集合的全部数据，未添加排序规则。要实现按时间戳排序，需使用Firestore的query和orderBy方法构建带排序条件的查询，具体步骤如下：

1. 导入必要的Firestore方法 #

在ChildrenList.js中新增导入query和orderBy：

import { collection, query, orderBy } from "@firebase/firestore";

2. 构建带排序规则的查询 #

修改ChildrenList组件中的查询逻辑，将普通集合引用替换为带排序的查询：

// 原代码
// const query = collection(db, path);
// 修改为：
const q = query(collection(db, path), orderBy('timeStamp', 'desc'));
const [docs, loading, error] = useCollectionData(q);

• orderBy('timeStamp', 'desc')表示按timeStamp字段降序排列（最新记录在前），若需升序可改为asc。
• 需确保Firestore子集合中的时间戳字段名确实为timeStamp，且字段类型为Firestore原生的Timestamp类型（而非字符串或数字）。

3. 完整修改后的ChildrenList.js代码 #

import { collection, query, orderBy } from "@firebase/firestore";
import { useCollectionData } from "react-firebase-hooks/firestore";
import { db } from "./firebase";
import Table from 'react-bootstrap/Table';

export default function ChildrenList({ path }) {
  const q = query(collection(db, path), orderBy('timeStamp', 'desc'));
  const [docs, loading, error] = useCollectionData(q);

  return (
    <ul>
      {loading && "Loading..."}
      <Table striped bordered hover variant="dark" size="md">
        <tbody> 
           {docs?.map((doc) => {
            const firebasetime = new Date(
              doc.timeStamp.seconds * 1000 + doc.timeStamp.nanoseconds / 1000000,
            );
            const date = firebasetime.toDateString();
            const timeStamp = firebasetime.toLocaleTimeString();
            console.log(date, timeStamp);
            return(
            <tr>
              <td>{doc.name}</td>
              <td>{doc.sid}</td>
              <td>{doc.group}</td>
              <td>{doc.room}</td>              
              <th>{date}</th>
              <th>{timeStamp}</th>
            </tr>
           )})}
        </tbody>
      </Table>
    </ul>
  );
}

（注：代码移除了冗余的timestamp对象创建，直接使用doc.timeStamp即可）

4. 索引注意事项 #

若后续查询添加了过滤条件（如where），Firestore会在控制台提示创建复合索引，只需按照提示链接完成创建即可；单纯的单字段排序无需手动创建索引，Firestore会自动处理。

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