使用Firebase Storage时async/await导致数组为空的问题排查

核心问题 #

你遇到的问题是**querySnapshot.forEach无法正确处理异步回调**：

• forEach是同步遍历方法，即使传入async回调函数，它也不会等待每个回调内的异步操作（比如await Promise.all(promises)）完成，而是直接执行后续的commit语句，此时data数组还未被填充，最终提交空数组。
• 调试模式下能看到完整数据，是因为调试过程中代码执行被暂停，给了异步操作足够时间完成，data数组已被正确填充。

修复方案 #

将forEach替换为map收集所有处理文档的异步Promise，再用Promise.all等待所有Promise完成后，再提交数据：

async FetchData({ state, commit }, to) {
  try {
    const q = query(collection(db, to));
    await onSnapshot(q, async (querySnapshot) => {
      // 用map收集每个文档处理的Promise
      const dataPromises = querySnapshot.docs.map(async (doc) => {
        let item = {
          id: doc.id,
          name: doc.data().name,
          slug: doc.data().slug,
          country: doc.data().country,
          duration: doc.data().duration,
          year: doc.data().year,
          video: doc.data().video,
          genres: doc.data().genres,
          actors: doc.data().actors,
        };
        if (to === "films") {
          const starsRef = ref(storage, `images/${doc.id}/poster.png`);
          // 单个Promise无需用Promise.all，直接await即可
          item.poster = await getDownloadURL(starsRef);
        }
        return item;
      });
      // 等待所有异步操作完成，得到完整数据数组
      const data = await Promise.all(dataPromises);
      commit("setData", { data, to });
    });
  } catch (err) {
    console.error(err);
  }
}

额外优化 #

由于promises数组中只有一个getDownloadURL的Promise，可直接await该Promise，无需使用Promise.all，简化代码逻辑。

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