JavaScript中使用Firestore querySnapshot后获取数组长度为0如何解决

• Firestore 的数据查询请求为异步IO操作，你读取数组长度的同步代码执行时序早于请求回调里的数组push操作，读取长度时数组还未被赋值，因此返回0。
• 控制台打印数组时能看到完整内容，是浏览器控制台对引用类型的懒加载特性导致：你点击展开数组时异步请求已执行完成，控制台展示了数组的最新状态，但打印动作发生时数组确实是空数组。

1. 回调内处理业务逻辑 #

所有需要使用该数组的操作，都放到querySnapshot的成功回调内部执行，示例代码如下：

// 全局数组
const messageList = [];

db.collection("你的消息集合名").get().then((querySnapshot) => {
  querySnapshot.forEach((doc) => {
    messageList.push(doc.data());
  });
  // 回调内部访问数组可拿到正确长度
  console.log(messageList.length); // 正常输出2
  // 后续数组相关业务逻辑写在这里
})

2. async/await 语法简化异步逻辑 #

将查询逻辑封装为异步函数，用await等待查询完成后再操作数组：

const messageList = [];

async function fetchMessageList() {
  const querySnapshot = await db.collection("你的消息集合名").get();
  querySnapshot.forEach((doc) => {
    messageList.push(doc.data());
  });
  console.log(messageList.length); // 正常输出2
  // 后续业务逻辑
}

// 调用异步函数
fetchMessageList();

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