仅使用Node.js服务端的纯JS网页应用如何实现Firestore帖子分页

问题原因 #

你的代码存在3个核心问题导致分页只能拉取前2页：

1. 点击事件重复绑定：你把$("#next").click()的绑定逻辑放在了snapshot.forEach循环中，每页返回4条数据就会重复绑定4次点击事件，点击一次按钮会同时触发多次请求，打乱分页逻辑。
2. 游标没有持久化更新：你当前存储的lastVisible仅保存了第一页的最后一条文档，后续点击下一页始终用这个游标查询，永远只能拿到第二页的数据。
3. 缺少固定排序规则：Firestore分页要求查询必须绑定明确的排序规则，否则游标定位会出现不可预期的错误。

修复后的完整代码 #

// 每页条数
const records_per_page = 4;
// 全局存储当前分页的最后一条文档游标
let lastVisible = null;
const postsCollection = firebase.firestore().collection("Posts");
// 定义固定排序规则，这里按发帖时间倒序，可替换为你集合中实际存在的字段，比如文档ID
const baseQuery = postsCollection.orderBy("createTime", "desc");

// 加载第一页数据
function loadFirstPage() {
  baseQuery.limit(records_per_page).get().then((snapshot) => {
    document.getElementById("post-container").innerHTML = '';
    if (snapshot.empty) {
      document.getElementById("next").disabled = true;
      return;
    }
    snapshot.forEach(taskValue => showPosts(taskValue));
    // 更新游标为当前页最后一条文档
    lastVisible = snapshot.docs[snapshot.docs.length - 1];
  });
}

// 下一页点击事件仅绑定一次，不要放在查询回调或循环中
$("#next").click(function() {
  if (!lastVisible) return;
  baseQuery.limit(records_per_page)
    .startAfter(lastVisible)
    .get()
    .then((snapshot) => {
      if (snapshot.empty) {
        $("#next").text("没有更多内容").prop("disabled", true);
        return;
      }
      snapshot.forEach(taskValue => showPosts(taskValue));
      // 每次查询完更新游标
      lastVisible = snapshot.docs[snapshot.docs.length - 1];
    });
});

// 页面初始化触发第一页加载
loadFirstPage();

注意事项 #

• 代码中的排序字段createTime需要替换为你Posts集合中实际存在的字段，如果没有专用排序字段可以替换为orderBy(firebase.firestore.FieldPath.documentId())按文档ID排序
• 可给下一页按钮添加加载状态，避免用户重复点击触发多次请求

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