如何从Firestore中获取map数据并按日期排序后展示在列表中？

以下示例基于Firebase Web v9 SDK，其他端（Android/iOS/Flutter等）逻辑完全一致，仅语法略有区别。

1. 读取文档并提取map数据 #

首先获取存储了record map的目标文档，将map结构转换为数组方便后续处理：

import { getFirestore, doc, getDoc } from "firebase/firestore";

const db = getFirestore();
// 替换为你实际的集合名、文档ID
const targetDocRef = doc(db, "你的集合名", "你的文档ID");

const getRecordList = async () => {
  const docSnapshot = await getDoc(targetDocRef);
  if (docSnapshot.exists()) {
    const docData = docSnapshot.data();
    // 提取record map的所有值，转为数组
    return Object.values(docData.record || {});
  }
  return [];
}

2. 按日期字段排序 #

根据每条数据的date字段排序，适配Firestore Timestamp、时间戳数字、ISO日期字符串三种常见的日期存储格式：

const getSortedRecordList = async () => {
  const recordList = await getRecordList();
  // 升序（日期从早到晚），需要降序就把return的a、b位置互换
  return recordList.sort((a, b) => {
    const timeA = a.date?.toMillis ? a.date.toMillis() : new Date(a.date).getTime();
    const timeB = b.date?.toMillis ? b.date.toMillis() : new Date(b.date).getTime();
    return timeA - timeB;
  });
}

3. 渲染到列表 #

拿到排序后的数组直接遍历渲染即可，以React为例：

import { useState, useEffect } from "react";

function RecordListView() {
  const [sortedRecords, setSortedRecords] = useState([]);

  useEffect(() => {
    const loadData = async () => {
      const list = await getSortedRecordList();
      setSortedRecords(list);
    };
    loadData();
  }, []);

  return (
    <ul className="record-list">
      {sortedRecords.map((item, idx) => (
        <li key={idx} className="record-item">
          <p>日期：{item.date.toDate().toLocaleString()}</p>
          <p>描述：{item.description}</p>
          <p>金额：{item.amount}</p>
        </li>
      ))}
    </ul>
  );
}

• 如果你的record数据量超过百条，不建议存在单个文档的map结构里，Firestore单个文档最大容量为1MB，数据量大会超出上限。建议改为子集合存储，查询时直接调用orderBy("date")服务端排序，无需客户端处理排序逻辑。
• 若date字段存储为自定义格式的字符串，需先统一转换为时间戳再排序，避免字符串排序出现异常。

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