Firebase Firestore 分页返回重复的结果

Question

我正在创建一个社交提要，我想在其中无限滚动，使用 firebase 分页，但即使我的 firestore 数据库中有很多不同的数据，查询每次都返回相同的内容。

这是我的初始查询：

const getThreads = async () => {
    try {
      setLoading(true);
      const ref = firestore()
        .collection('Discover')
        .orderBy('rank', 'desc')
        .limit(10);

      let docSnaps = await ref.get();

      if (docSnaps.empty !== true) {
        let docData = docSnaps.docs.map(document => {
          return {
            data: document.data(),
            id: document.id,
          };
        });
        setLastVisible(docData[docData.length - 1].id);
        setThreads(docData); //Setting the data to display in UI
      }
      setLoading(false);
    } catch (e) {
      setLoading(false);
      console.log(e);
      Alert.alert(
        'Oops! Looks like something went wrong',
        'Please try again later',
        [{text: 'OK'}],
      );
    }
  };

如您所见，每个字段post/thread都按rank字段排序。我将最后一个可见设置为documentId在下面的查询中使用以获得更多posts/threads

async function getMoreThreads() {
    try {
      console.log('Getting More threads');
      if (lastVisible !== null) {
        setRefreshing(true);
        const ref = firestore()
          .collection('Discover')
          .orderBy('rank', 'desc')
          .startAfter(lastVisible)
          .limit(10);

        let docSnaps = await ref.get();

        if (docSnaps.empty !== true) {
          let docData = docSnaps.docs.map(document => {
            return {
              data: document.data(),
              id: document.id,
            };
          });
          console.log('DocData', docData.length);
          setLastVisible(docData[docData.length - 1].id);
          setThreads([...threads, ...docData]);
        }
        setRefreshing(false);
      }
    } catch (e) {
      console.log('Error getting more', e);
      Alert.alert(
        'Oops! Looks like somthing went wrong',
        'Please try again later',
        [{text: 'OK'}],
      );
    }
  }

我对为什么会发生这种情况的假设是因为我正在使用documentIds分页并且我的文档 Id 是像这样的数字长整数字符串 1002103360646823936,1259597720752291841, 974895869194571776, etc.

非常感谢帮助。

Answer 1

你的假设是正确的。您用于分页startAfter(...)的字段应该与您在orderBy(...)方法中使用的字段匹配- 在这种情况下，您的startAfter(...)方法假设您正在向它传递一个rank值。

您可以改为DocumentSnapshot在startAfter(...)方法中传入对象：

const ref = firestore()
          .collection('Discover')
          .orderBy('rank', 'desc')
          .startAfter(documentSnapshot) // document snapshot of the last element
          .limit(10);