Firestore分页，如何?

Question

我似乎真的不明白这是怎么做的。不要认为文档解释得很好，或者我只是不明白:)

我想做的是有一个列表，开始时显示X项。然后点击按钮加载集合中的下一个X项…

我创建了这个泛型函数，我可以调用它:

let latestDoc = null;
export const getDocumentsPaginated = async <T extends { id?: string }>(collectionPath: string, numberOfDocs: number) => {
const items: T[] = [];
const q = query(collection(db, collectionPath), orderBy('createdAt', 'desc'), startAfter(latestDoc || 0), limit(numberOfDocs));
const querySnapshot = await getDocs(q);
console.log('querySnapshot', querySnapshot)
latestDoc = querySnapshot.docs[querySnapshot.docs.length - 1];
querySnapshot.forEach((doc) => {
const data = doc.data();
items.push({
...data,
id: doc.id
} as T);
});
return items;
};

然后尝试从Vue组件调用它:

const fetchExercises = async () => {
isLoading.value = true;
try {
const result = await getDocumentsPaginated<ExerciseDocument>(`exercises/${companyId}/exercises`, 5);
console.log('internal', result);
exercises.value = result;
isLoading.value = false;
} catch (e) {
throw new Error('cant load exercises ' + e);
}
};

这似乎不起作用。我只是得到一个空数组即使我知道集合有很多文档?

我做错了什么?只要真的伸出援助之手

Answer 1

Firestore分页是否不工作基于偏移量，所以你将20添加到计数器将不起作用(正如你所发现的)。

---

Firestore分页工作基于游标对象。这意味着要查询第二页上的文档，您必须知道第一页上最后一项的数据。

由于您使用orderBy('createdAt', 'desc')，您将需要知道第一页上最后一个文档的createdAt值(和文档ID)，并将这些值传递给startAfter以获得第二页的文档。

---

在Firestore中使分页工作的最简单方法是将当前页面最后一项的DocumentSnapshot保存在一个变量中，例如:

const querySnapshot = await getDocs(q);
lastDocumentOnCurrentPage = querySnapshot.docs[querySnapshot.docs.length-1];

当需要加载下一页数据时，将该变量传递给查询的startAfter条件。