Firebase V9 分批查询集合文档无法获取下/上一批分页数据问题

你现有代码存在4个关键问题，导致无法拉取后续数据、分页功能失效：

• 第二批数据查询仅构造了query对象，未调用getDocs()执行查询逻辑，自然无法返回后续批次结果
• 初始化时尝试一次性拉取全量集合数据的方案完全不适用于20万条文档的规模，会直接造成前端内存溢出、页面卡死，且未维护分页游标状态，无法实现跨批次的上下页跳转
• Firestore分页依赖稳定排序+游标定位，你当前查询未显式指定orderBy规则，游标定位会出现偏差，极易出现数据重复、遗漏问题
• 本地stableSort+slice的分页逻辑仅对已拉取到前端的数据有效，未加载的后端数据完全无法被分页器访问

1. 补充依赖导入 #

首先在Firestore导入项中补充缺失的方法：

import {
  collection,
  getDocs,
  query,
  startAfter,
  limit,
  orderBy,
  getCountFromServer
} from "firebase/firestore";

2. 调整状态定义 #

不要在前端存储全量数据，仅维护当前页数据、分页游标栈、总条数状态：

// 当前页展示的行数据
const [rows, setRows] = useState([]);
const [order, setOrder] = useState("asc");
const [orderBy, setOrderBy] = useState("idNumber"); // 用唯一字段做默认排序字段，保证排序稳定
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
// 分页游标栈：索引对应页码，存储每个页首的文档快照，用于快速定位分页位置
const [pageCursors, setPageCursors] = useState([null]);
// 集合总文档数，通过服务端计数接口获取，不拉取全量数据
const [totalCount, setTotalCount] = useState(0);
// 加载状态，防止重复触发查询
const [loading, setLoading] = useState(false);

3. 封装通用分页查询函数 #

实现可复用的页数据加载逻辑，支持按页码、排序规则拉取对应数据：

const loadPageData = async (targetPage) => {
  setLoading(true);
  try {
    // 构造基础查询，动态传入排序规则和单页条数
    let baseQuery = query(
      collection(db, "users"),
      orderBy(orderBy, order),
      limit(rowsPerPage)
    );

    // 非第一页时，取对应页码的起始游标定位
    const pageStartCursor = pageCursors[targetPage];
    if (pageStartCursor) {
      baseQuery = query(baseQuery, startAfter(pageStartCursor));
    }

    const snapshot = await getDocs(baseQuery);
    // 格式化当前页数据
    const currentPageData = snapshot.docs.map(doc => {
      const userData = doc.data();
      return {
        id: userData.idNumber,
        registered: userData.dateRegistered?.toDate().toDateString(),
        firstName: userData.firstName,
        lastName: userData.lastName,
        email: userData.email,
        idNumber: userData.idNumber,
        phoneNumber: userData.phoneNumber,
        loanLimit: userData.loanLimit,
        deviceModel: userData.deviceModel ?? "Not Provided",
        isQualified: userData.qualified,
      }
    });

    setRows(currentPageData);

    // 如果是加载未缓存过的新页，将当前页最后一条文档快照存入游标栈，供下一页查询使用
    if (targetPage >= pageCursors.length - 1 && snapshot.docs.length > 0) {
      const lastDocOfPage = snapshot.docs[snapshot.docs.length - 1];
      setPageCursors(prev => [...prev, lastDocOfPage]);
    }
  } catch (err) {
    console.error("分页数据加载失败:", err);
  } finally {
    setLoading(false);
  }
};

4. 初始化&事件逻辑调整 #

// 初始化：拉取总条数+加载第一页数据
useEffect(() => {
  const init = async () => {
    const countRes = await getCountFromServer(collection(db, "users"));
    setTotalCount(countRes.data().count);
    await loadPageData(0);
  };
  init();
}, []);

// 切换每页条数/排序规则时，重置游标缓存，回到第一页
useEffect(() => {
  setPageCursors([null]);
  setPage(0);
  loadPageData(0);
}, [rowsPerPage, order, orderBy]);

// 分页切换事件
const handleChangePage = async (_, newPage) => {
  await loadPageData(newPage);
  setPage(newPage);
};

const handleChangeRowsPerPage = (e) => {
  setRowsPerPage(parseInt(e.target.value, 10));
};

// 排序事件
const handleRequestSort = (_, property) => {
  const isAsc = orderBy === property && order === "asc";
  setOrder(isAsc ? "desc" : "asc");
  setOrderBy(property);
};

5. 组件参数修正 #

• 移除本地stableSort和slice逻辑，直接遍历rows渲染即可，返回的已经是当前页排序后的数据
• 将TablePagination组件的count属性从rows.length改为totalCount，保证分页器显示正确的总条数
• 可根据loading状态添加表格loading遮罩，避免用户重复操作

• 排序字段必须包含唯一值（比如身份证号、文档ID），如果用非唯一字段（比如注册时间）排序，需要额外追加唯一字段作为第二排序规则，否则会出现分页数据错乱
• 游标栈方案实现上一页不需要反向查询，所有已访问过的页面都可以通过缓存的游标快速拉取，性能远高于endBefore反向查询的方案
• 不要尝试一次性拉取超过1000条的Firestore数据，单查询超时、前端内存占用过高的问题会非常明显，按需分页加载是20万条规模下唯一可行的方案

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