无法通过查询从Cloud Firestore获取数据，报querySnapshot未定义错误

嘿，这个错误我之前也踩过坑！本质原因是Firestore的查询属于异步操作，你大概率是在查询还没完成、querySnapshot还没生成的时候就尝试访问它了，或是把它写在了异步回调的作用域外面。

先给你拆解下错误根源：Firestore的get()方法返回的是一个Promise，它不会立刻拿到数据，得等服务器响应后才会生成querySnapshot。要是直接在get()外面用这个变量，JS自然会报错说它未定义。

下面给你两种顺手的修正方案，选你习惯的来用：

方案1：用Promise回调处理异步逻辑 #

这是最基础的写法，把处理数据的代码放在.then()回调里，确保只有当数据成功返回后才去访问querySnapshot：

// 先获取用户集合的引用
var usersCollectionRef = db.collection("users");

// 发起查询并在回调中处理数据
usersCollectionRef.get().then((querySnapshot) => {
  // 找到你的Bootstrap表格tbody元素
  const tableBody = document.querySelector('#user-table tbody');
  
  // 遍历每个文档，生成表格行
  querySnapshot.forEach((doc) => {
    const user = doc.data();
    const row = document.createElement('tr');
    // 填充表格单元格内容，加个默认值避免空数据报错
    row.innerHTML = `
      <td>${user.name || '无名称'}</td>
      <td>${user.score || 0}</td>
    `;
    tableBody.appendChild(row);
  });
}).catch((error) => {
  // 捕获查询失败的情况，方便排查问题
  console.error("加载用户数据出错：", error);
});

方案2：用async/await简化代码 #

如果习惯同步风格的写法，可以用async/await，代码会更清爽，但要注意必须在async函数里使用：

// 定义异步函数加载表格数据
async function loadUserTableData() {
  try {
    var usersCollectionRef = db.collection("users");
    // 等待查询完成，获取到querySnapshot
    const querySnapshot = await usersCollectionRef.get();
    
    const tableBody = document.querySelector('#user-table tbody');
    querySnapshot.forEach((doc) => {
      const user = doc.data();
      const row = document.createElement('tr');
      row.innerHTML = `
        <td>${user.name || '无名称'}</td>
        <td>${user.score || 0}</td>
      `;
      tableBody.appendChild(row);
    });
  } catch (error) {
    console.error("加载用户数据出错：", error);
  }
}

// 调用函数启动数据加载
loadUserTableData();

额外要注意的细节： #

• 确保你的Bootstrap表格结构完整，要有对应的tbody用来插入动态行：

<table class="table table-striped" id="user-table">
  <thead>
    <tr>
      <th>名称</th>
      <th>分数</th>
    </tr>
  </thead>
  <tbody>
    <!-- 动态生成的行会插入到这里 -->
  </tbody>
</table>

• 别忘了先正确初始化Firebase，包括引入SDK、初始化app实例，不然db本身也会未定义哦！

内容的提问来源于stack exchange，提问作者Luke Alexander Thompson