Vue3应用中Firebase Storage获取下载链接返回Promise问题排查

1. async函数调用未执行await解析 #

你定义的films是async函数，所有async函数默认返回Promise对象。在给poster赋值时直接调用films()，没有用await等待Promise完成，所以poster字段存储的是未解析的Promise，而非实际下载链接。

2. 未等待所有异步操作完成就提交状态 #

onSnapshot的回调函数中，你通过forEach遍历文档时，发起了获取下载链接的异步请求，但没有等待所有请求完成就调用commit("setData")。此时所有poster对应的Promise都还处于pending状态，提交的数据自然包含未解析的Promise。

3. 冗余的异步写法（第二段代码） #

第二段的url函数里同时使用await和.then()属于冗余写法，虽然最终能返回正确的url，但调用这个函数时同样需要await才能拿到实际值，否则还是返回Promise。

调整代码逻辑，等待所有下载链接获取完成后再提交状态：

async FetchData({ state, commit }, to) {
  try {
    commit("setLoading", true);
    const q = query(collection(db, to));

    onSnapshot(q, async (querySnapshot) => {
      // 用map返回每个item的Promise，便于Promise.all等待
      const dataPromises = querySnapshot.docs.map(async (doc) => {
        let poster = null;
        if (to === "films") {
          const starsRef = ref(storage, `images/${doc.id}/poster.png`);
          poster = await getDownloadURL(starsRef);
        }

        return {
          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,
          poster
        };
      });

      // 等待所有异步请求完成，拿到解析后的完整数据
      const data = await Promise.all(dataPromises);
      commit("setData", { data, to });
    });
  } catch (err) {
    console.log(err);
  } finally {
    commit("setLoading", false);
  }
}

说明：

• 将forEach改为map，每个文档返回一个Promise（包含解析后的poster）
• 用Promise.all等待所有Promise完成，确保data里的每个item都包含实际下载链接
• 直接在map的async回调中获取poster，避免嵌套async函数的冗余写法

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