Firestore查询游标始终返回相同数据问题求助（虚拟表格场景）

核心问题 #

你用错了Firestore查询的startAt()参数逻辑：startAt()不是接收数组偏移的索引数字，而是接收你orderBy指定字段的具体值。

你当前按price排序，却传入数字索引，Firestore会把这个数字当成price字段的数值来定位起始点。如果不同索引对应的price值不存在，或者都匹配到同一个起始位置，自然会返回相同的数据批次。

正确实现方式 #

要做惰性加载/分页，得基于上一批数据最后一条的price值（或文档快照）来定位下一批的起始位置，代码调整如下：

const subscribeForItems = (
  lastPrice?: number, // 上一批最后一条数据的price，首次调用可不传
  handleItems: (items: FirestoreItem[]) => void,
): (() => void) => {

  // 基础查询：按price排序，取LIMIT条
  let firestoreQuery = query(
    collection(firestore, RootCollections.Items),
    orderBy('price'),
    limit(LIMIT),
  );

  // 如果有上一批的最后price，就从该值之后开始查询
  if (lastPrice !== undefined) {
    firestoreQuery = query(firestoreQuery, startAfter(lastPrice));
  }

  return onSnapshot(firestoreQuery, (querySnapshot) => {
    const items: FirestoreItem[] = querySnapshot.docs.map(doc => 
      FirestoreUtils.extractDocumentData<FirestoreItem>(doc)
    );

    handleItems(items);
  });
};

补充优化点 #

如果你的price字段存在重复值，用startAfter(lastPrice)可能会出现重复数据或跳漏的情况，此时更稳妥的方式是传入上一批最后一个文档的快照：

// 调整参数为接收最后一个文档快照
const subscribeForItems = (
  lastDocSnapshot?: QueryDocumentSnapshot,
  handleItems: (items: FirestoreItem[]) => void,
): (() => void) => {

  let firestoreQuery = query(
    collection(firestore, RootCollections.Items),
    orderBy('price'),
    limit(LIMIT),
  );

  if (lastDocSnapshot) {
    firestoreQuery = query(firestoreQuery, startAfter(lastDocSnapshot));
  }

  return onSnapshot(firestoreQuery, (querySnapshot) => {
    const items: FirestoreItem[] = querySnapshot.docs.map(doc => 
      FirestoreUtils.extractDocumentData<FirestoreItem>(doc)
    );

    handleItems(items);
  });
};

使用时，第一次调用不传参数拿到第一批数据；加载下一批时，传入querySnapshot.docs[querySnapshot.docs.length - 1]即可精准定位。

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