RTK Query返回数据异常导致Firestore无限滚动分页失效求助

RTK Query返回的lastDoc无法用于Firestore分页，本质原因是RTK Query会对缓存数据做JSON序列化处理。Firestore的DocumentSnapshot是带有内部状态和原型方法的复杂对象，序列化后会丢失Firestore依赖的内部属性，变成普通对象，自然无法被startAfter()等分页方法识别。

虽然控制台显示两个lastDoc的表面属性一致，但RTK Query返回的是序列化后重建的普通对象，和直接调用fetchInitialData得到的原生DocumentSnapshot不是同一个引用，也没有Firestore需要的内部接口。

不要直接将DocumentSnapshot存入RTK Query的返回数据，而是提取可序列化的游标标识，在需要分页时再用这些标识重建有效的DocumentSnapshot。

1. 修改RTK Query的queryFn，返回序列化后的游标信息 #

假设你的Firestore查询是按createdAt字段排序（可替换为你实际的排序字段），修改queryFn如下：

async queryFn() {
  try {
    const { prod, lastDoc } = await fetchInitialData();
    // 提取可序列化的游标数据：文档ID + 排序字段值
    const cursor = lastDoc ? {
      docId: lastDoc.id,
      sortField: lastDoc.get('createdAt') // 替换为你的查询排序字段
    } : null;
    return { data: { prod, cursor } };
  } catch (err) {
    return { error: err };
  }
}

2. 在组件中使用游标重建DocumentSnapshot #

修改分页加载函数，用RTK Query返回的游标信息重新获取有效的DocumentSnapshot：

const getMorePosts = async () => {
  if (!data?.cursor) return;
  
  // 从游标重建DocumentSnapshot
  const docRef = db.collection('你的集合名').doc(data.cursor.docId);
  const lastDoc = await docRef.get();
  
  // 或者如果用排序字段直接分页，无需重建快照：
  // const postData = await fetchMoreData(data.cursor.sortField);
  
  const postData = await fetchMoreData(lastDoc);
  setLastDocSaved(postData.lastDoc);
  setProducts(prev => prev ? [...prev, ...postData.prod] : postData.prod);
};

3. 优化组件状态管理（可选） #

既然已经用RTK Query获取初始数据，可以直接用RTK Query的结果来初始化状态，避免重复调用fetchInitialData：

useEffect(() => {
  if (data?.prod) {
    setProducts(data.prod);
  }
}, [data]);

• 永远不要将Firestore的DocumentSnapshot、QuerySnapshot等带内部状态的对象直接存入RTK Query缓存，必须提取可序列化的核心信息。
• 如果你的分页查询是基于多个排序字段，需要把所有排序字段的值都存入游标。

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