我如何对 firebase 中的数据进行分页。我不断收到错误

Question

这是我下面的代码

<nav v-if="(tasks.length >= 7)" aria-label="Page navigation example">
    <ul class="pagination fw-bold justify-content-center">
        <li class="page-item">
        <a class="page-link" href="#" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
        </a>
        </li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item" @click="nextTableData"><a class="page-link" href="#">2</a></li>
        <li class="page-item" v-if="(tasks.length > 14)"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
        <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
        </a>
        </li>
    </ul>
</nav>

nextTableData(){
    let q
    this.spinnerShow = true
    if (this.lastdoc != null) {
        q = query(this.todosCollectionRef, orderBy("date", "desc"), startAfter(this.lastdoc));
        console.log(q, this.lastdoc);
    } else {
        q = query(this.todosCollectionRef, orderBy("date", "desc"), limit(15))
        console.log(q, this.lastdoc);
    }
    onSnapshot(q, (querySnapshot) => {
        const fbTasks = [] 
        this.lastdoc = querySnapshot.docs[querySnapshot.docs.length - 1]
            console.log(this.lastdoc); 
        querySnapshot.forEach((doc) => {
                const task = {
                    id: doc.id,
                    title: doc.data().title,
                    priority: doc.data().priority,
                    status: doc.data().status,
                    desc: doc.data().desc
                }
                fbTasks.push(task)
        })
            this.tasks = fbTasks
            this.spinnerShow = false
    })
}

我尝试从 firebase 获取表上最后一个文档的快照，然后当我单击按钮时，我将使用 firebase 中的 startafter 方法从我得到的最后一个文档中获取数据，但它会抛出错误：

Function 使用无效数据调用 startAfter()。 不支持的字段值：未定义

并且只有 else 块中的代码运行

Answer 1

通过广泛浏览 firebase 文档并使用 getDocs 方法，我已经能够自己解决这个问题。 其中获取页面上最后一个文档的快照，并使用 startAfter 方法查看下一组数据。 请查看以下内容：

async nextTableData(){
        this.spinnerShow = true
        const documentSnapshots = await getDocs(this.todosCollectionQuery);

        // Get the last visible document
        const lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
        console.log("last", lastVisible);

        // Construct a new query starting at this document,
        const next = query(this.todosCollectionRef, orderBy("date", "desc"), startAfter(lastVisible), limit(10));

        onSnapshot(next, (querySnapshot) => {
            const fbTasks = [] 
            querySnapshot.forEach((doc) => {
                    const task = {
                        id: doc.id,
                        title: doc.data().title,
                        priority: doc.data().priority,
                        status: doc.data().status,
                        desc: doc.data().desc
                    }
                    fbTasks.push(task)
            })
                this.tasks = fbTasks
                this.spinnerShow = false
        })
    }