React中实现Firestore集合最新文档置顶显示

你可以通过两种方式实现需求，优先推荐数据库层面排序的方案，效率更高：

方案一：Firestore查询时按时间戳降序排序（推荐） #

既然你已经给每个文档添加了timeStamp字段，直接在查询时指定按该字段降序排列，获取到的列表本身就是最新文档在前的顺序，无需前端额外处理。

修改实时监听代码：

import { query, collection, onSnapshot, orderBy } from "firebase/firestore"; // 确保导入query和orderBy

useEffect(() =>{
  // LISTEN (REALTIME)
  const unsub = onSnapshot(
    query(collection(db, "users"), orderBy("timeStamp", "desc")), // 添加orderBy排序规则
    (snapShot) => {
      let list = [];
      snapShot.docs.forEach((doc) => {
        list.push({ id: doc.id, ...doc.data() });
      });
      setData(list);
    },
    (error) => {
      console.log(error);
    }
  );

  return () => {
    unsub();
  };
}, []);

方案二：前端反转数组（仅小数据量场景适用） #

如果暂时不想修改查询逻辑，可以在将数据存入状态前反转数组，让最新添加的文档移到顶部：

修改实时监听中的setData部分：

useEffect(() =>{
  // LISTEN (REALTIME)
  const unsub = onSnapshot(
    collection(db, "users"),
    (snapShot) => {
      let list = [];
      snapShot.docs.forEach((doc) => {
        list.push({ id: doc.id, ...doc.data() });
      });
      setData(list.reverse()); // 反转数组调整顺序
    },
    (error) => {
      console.log(error);
    }
  );

  return () => {
    unsub();
  };
}, []);

注意：方案二仅适合数据量较小的场景，当数据量大时，数据库层面的排序（方案一）性能更优，且能避免前端处理带来的额外开销。

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