如何实现Firebase Realtime DB与MUI DataGrid的双向分页？

问题诊断 #

当前分页逻辑存在两个核心问题：

1. 游标选择错误：向左翻页（查看更新数据）时，你用了当前页最旧项的date作为游标，但降序排列下，要获取更晚的数据，应该以当前页**最新项的date+key**作为游标（仅用date可能存在重复值，导致定位错误）。
2. 查询方法误用：降序排序下，startAfter()会返回比游标更小（更早）的数据，而向左翻页需要的是比游标更大（更新）的数据，应该调整查询方法配合降序逻辑。

正确实现步骤 #

1. 定义分页状态 #

在组件中维护关键状态：

const [rows, setRows] = useState([]);
const [pageSize, setPageSize] = useState(10);
// 存储当前页的首尾游标：{ first: { date, key }, last: { date, key } }
const [cursors, setCursors] = useState({ first: null, last: null });
const [isLoading, setIsLoading] = useState(false);

2. 封装查询函数 #

实现通用的数据查询逻辑，适配双向分页：

const fetchData = async (cursor = null, direction = 'next') => {
  setIsLoading(true);
  let query = firebase.database().ref('your-collection')
    .orderByChild('date')
    .limitToLast(pageSize); // 借limitToLast实现降序取最新pageSize条数据

  if (cursor) {
    if (direction === 'next') {
      // 向右翻页：取比当前页最旧项更早的数据
      query = query.endBefore(cursor.date, cursor.key);
    } else if (direction === 'prev') {
      // 向左翻页：取比当前页最新项更新的数据，多取1条用于去重
      query = query.startAt(cursor.date, cursor.key).limitToLast(pageSize + 1);
    }
  }

  try {
    const snapshot = await query.once('value');
    let data = [];
    snapshot.forEach(child => {
      data.push({ id: child.key, ...child.val() });
    });

    // 反转数组得到降序结果
    data = data.reverse();

    // 向左翻页时移除重复的第一条数据
    if (direction === 'prev' && data.length > pageSize) {
      data.shift();
    }

    // 更新当前页的首尾游标
    setCursors({
      first: data.length > 0 ? { date: data[0].date, key: data[0].id } : null,
      last: data.length > 0 ? { date: data[data.length - 1].date, key: data[data.length - 1].id } : null
    });
    setRows(data);
  } catch (error) {
    console.error('Fetch data error:', error);
  } finally {
    setIsLoading(false);
  }
};

3. 绑定MUI DataGrid分页事件 #

在DataGrid中处理分页切换逻辑：

<DataGrid
  rows={rows}
  columns={yourColumns}
  pageSize={pageSize}
  onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
  onPageChange={(params) => {
    const currentPage = params.page;
    const prevPage = params.previousPage;

    if (currentPage > prevPage) {
      // 向右翻页：加载更早数据
      fetchData(cursors.last, 'next');
    } else {
      // 向左翻页：加载更新数据
      fetchData(cursors.first, 'prev');
    }
  }}
  loading={isLoading}
  paginationMode="server"
  rowCount={-1} // 无法获取总条数时设为-1
/>

4. 初始化加载数据 #

组件挂载时加载第一页数据：

useEffect(() => {
  fetchData();
}, [pageSize]);

关键原理说明 #

• 降序分页逻辑：Realtime DB的orderByChild默认升序，用limitToLast(pageSize)获取升序的最后pageSize条数据，反转后得到降序结果。
• 游标唯一性：同时使用date和节点唯一key作为游标，避免因date重复导致的定位错误。
• 向左翻页去重：查询时多取1条数据，移除与上一页重复的条目，保证分页数据的连贯性。

适配的数据库结构 #

只要你的数据库结构符合以下形式即可正常工作：

{
  "your-collection": {
    "item-id-1": {
      "date": 1699999999000,
      "content": "最新内容"
    },
    "item-id-2": {
      "date": 1699888888000,
      "content": "旧内容"
    }
  }
}

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