Firestore 分页：如何使用 Javascript 加载下一组数据

Question

这是我加载集合中前 100 个文档的代码：

db.collection("books").where("ItemType", "==", "Book").limit(100)
        .get()
        .then(querySnapshot=>{
                querySnapshot.forEach(doc=>{
                    console.log(doc.data())
                    let data = doc.data();
                    let row  = `<tr>
                                    <td>${data.Title}</td>
                                   
                            </tr>`;
                    let table = document.getElementById('myTable')
                    table.innerHTML += row
                })
            })
            .catch(err=>{
                console.log(`Error: ${err}`)
            });

如何在按下按钮后继续加载接下来的 100 个文档？

function LoadMore(){
    //Load 100 more documents
} 

Answer 1

您可以使用startAt(doc) 或startAfter(doc)。 只需提供上次查询中文档的字段值或 DocumentSnapshot。

在你的情况下是：

db.collection("books").where("ItemType", "==", "Book")
.startAfter(lastDocFromFirstQuery).limit(100).get();

回答您编辑的问题

// define this somewhere globally
let lastDoc;

// use just this function
function queryBooks() {
  let query;

  // if lastDoc is already defined then use it as a reference point for firestore
  if (lastDoc != null) {
    query = fsDb.collection("books").where("ItemType", "==", "Book").startAfter(lastDoc);
  } else {
    query = fsDb.collection("books").where("ItemType", "==", "Book");
  }

  query.limit(100).get().then(querySnapshot=>{

        lastDoc = querySnapshot.docs[querySnapshot.docs.length - 1];

        querySnapshot.forEach(doc=>{
          console.log(doc.data())
          let data = doc.data();
          let row  = `<tr>
                                <td>${data.Title}</td>
                               
                        </tr>`;
          let table = document.getElementById('myTable')
          table.innerHTML += row
        })
      })
      .catch(err=>{
        console.log(`Error: ${err}`)
      });
}