点击「查看更多」按钮实现Firestore数据分页失败，寻求帮助

原代码存在的核心问题 #

• 变量引用错误：获取查询快照后赋值给moreLoaded，但后续使用了未定义的data变量，直接导致报错中断执行
• 分页状态未持久化：每次调用getNextActivity都重新查询前3条数据，没有记录上一次加载的最后一个文档，无法实现真正的分页跳转
• 查询方法误用：分页查询属于集合查询，应该用getDocs而非getDoc（后者仅用于单个文档查询）
• 事件监听器重复绑定：将按钮点击事件放在函数内部，每次调用函数都会新增一个监听器，导致点击一次触发多次请求
• 分页条数不符合需求：后续查询的limit设为1，和预期的每次加载3条不符

修正后的完整代码 #

const theWorkout = document.getElementById("activity");
const moreBtn = document.getElementById("more");

// 保存分页的起始文档，初始为null表示从开头查询
let lastVisibleDoc = null;
// 基础查询（注意：排序规则必须和后续分页查询完全一致）
const baseQuery = query(
  collection(db, "uuid", uid, "activity", "history", "past-workouts"),
  orderBy("order", "desc")
);

// 通用加载数据函数，兼顾初始加载和分页加载
async function loadWorkouts() {
  let currentQuery;
  if (lastVisibleDoc) {
    // 分页加载：从上一次最后一个文档之后查询3条
    currentQuery = query(baseQuery, startAfter(lastVisibleDoc), limit(3));
  } else {
    // 初始加载：直接查询前3条
    currentQuery = query(baseQuery, limit(3));
  }

  const querySnapshot = await getDocs(currentQuery);
  
  // 没有更多数据时隐藏按钮，避免无效点击
  if (querySnapshot.empty) {
    moreBtn.style.display = "none";
    return;
  }

  // 更新最后可见文档，作为下一次分页的起始点
  lastVisibleDoc = querySnapshot.docs[querySnapshot.docs.length - 1];

  // 渲染加载到的数据
  querySnapshot.forEach((doc) => {
    const docId = doc.id;
    const name = "Session: " + doc.data().name;
    const date = "Date: " + doc.data().date;

    theWorkout.innerHTML += `
      <a href="activity/history.html?id=${docId}"> 
        <div class="workout-row">
          <div class="workout-title">${name}</div>
          <div class="workout-date">${date}</div>
        </div>
      </a>
    `;
    console.log("loaded: ", doc.data());
  });
}

// 页面初始化时加载第一批数据
loadWorkouts();

// 只绑定一次点击事件，避免重复触发
moreBtn.addEventListener("click", loadWorkouts);

关键改进说明 #

• 持久化分页状态：用lastVisibleDoc保存每次查询的最后一个文档，确保下一次查询能从正确的位置开始
• 统一查询逻辑：分离基础查询和动态分页参数，保证排序规则一致（Firestore要求分页查询的orderBy必须和初始查询完全匹配）
• 优化用户体验：无更多数据时自动隐藏「查看更多」按钮
• 避免重复绑定：将按钮点击事件放在函数外部，确保只绑定一次

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