base64上传Firebase Storage获取下载链接时storeImage返回空数组如何解决

安全阿岳

2026-9-26

问题原因

你当前代码的核心问题是没有等待所有图片上传、获取下载链接的异步操作完成，就提前返回了数组。
uploadString、getDownloadURL都是异步Promise任务，你仅在遍历中直接触发了这些任务，但没有做等待处理，storeImage函数会直接执行到return语句，此时异步任务还未完成，imageUrl还未被推入任何值，自然返回空数组。

修复方案

将遍历生成的每个异步操作都封装为独立的Promise，外层用Promise.all等待所有任务完成
直接使用Promise.all返回的结果作为最终的下载链接数组，无需单独维护数组做push操作
用async/await简化嵌套的Promise写法，逻辑更清晰

修复后完整代码

const index = () => {
  const storeImage = async (postData: PostType) => {
    const storage = getStorage();
    // 遍历生成所有「上传+获取下载链接」的异步任务列表
    const uploadTasks = postData.postImage.map(async (image, i) => {
      const storageRef = ref(
        storage,
        `ImagesOfPosts/${postData.userId}/${postData.postId}/image ${i}`
      );
      // 等待图片上传完成
      await uploadString(storageRef, image, "data_url", {
        contentType: "image/jpg",
      });
      // 等待获取下载链接并返回
      return getDownloadURL(storageRef);
    });
    // 等待所有异步任务全部执行完成，按遍历顺序返回所有下载链接
    const imageUrl = await Promise.all(uploadTasks);
    console.log(imageUrl);
    return imageUrl;
  };

  const addPostHandler = async (enteredPostData: PostType) => {
    const imageUrl = await storeImage(enteredPostData);
    // 此时已获取到所有图片的下载链接，再执行后续逻辑
    console.log("Printing.......");
  }
}