JavaScript Firebase Storage：如何等待下载URL？解决map返回undefined问题

我尝试通过map方法处理文件数组，期望返回Firebase Storage的下载URL数组，但打印imageUrls时得到的全是undefined，不过稍后控制台会输出正确的URL。代码如下：

const imageUrls = images.map((image, index) => {
  const imageUploadTask = storage()
    .ref(`products/${dataUser.name}/${name}/${image.name}${index}`)
    .put(image);
  imageUploadTask.on(
    "state_changed",
    (snapshot) => {},
    (error) => {
      console.log(error);
    },
    () => {
      storage()
        .ref(`products/${dataUser.name}/${name}/${image.name}${index}`)
        .getDownloadURL()
        .then((url) => {
          console.log(url);
          return url;
        })
        .catch((err) => {
          console.log(err);
        });
    }
  );
});

文件确实上传成功了，但代码似乎没等异步操作完成就返回了，请问我哪里错了？该怎么修复？

这个问题的核心是你没有正确处理异步操作的返回值，咱们一步步拆解：

为什么会得到全undefined的数组？ #

map方法是同步执行的，它会立刻遍历数组的每个元素并返回当前迭代的结果。但你在map里的逻辑存在两个关键问题：

1. 启动文件上传的put是异步操作，不会阻塞map的执行
2. on("state_changed")是事件监听函数，它本身不会返回任何值；你在上传完成的回调里返回了URL，但这个返回值根本不会传递给map的迭代结果

所以map遍历完所有元素时，每个迭代都没有返回有效内容，自然得到的是全undefined的数组。而控制台后来输出的URL，是上传完成后异步回调里打印的，这时候map早就执行完了。

修复方案：用Promise包装异步操作 + Promise.all等待所有完成 #

要解决这个问题，我们需要把每个文件的上传+获取URL的逻辑包装成一个Promise，这样map会返回一个Promise数组，再用Promise.all等待所有Promise完成，就能得到完整的URL数组了。

第一步：封装上传逻辑为Promise函数

先把单个文件的上传和URL获取逻辑封装成一个返回Promise的函数：

const uploadAndGetUrl = (image, index, dataUser, name) => {
  return new Promise((resolve, reject) => {
    // 创建存储引用
    const storageRef = storage().ref(`products/${dataUser.name}/${name}/${image.name}${index}`);
    // 启动上传任务
    const uploadTask = storageRef.put(image);

    uploadTask.on(
      "state_changed",
      (snapshot) => {
        // 这里可以添加上传进度的处理逻辑，比如更新进度条
        // const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        // console.log(`上传进度：${progress}%`);
      },
      // 上传失败时reject错误
      (error) => {
        console.error("文件上传失败：", error);
        reject(error);
      },
      // 上传完成后获取URL并resolve
      async () => {
        try {
          const downloadUrl = await storageRef.getDownloadURL();
          resolve(downloadUrl);
        } catch (err) {
          console.error("获取下载URL失败：", err);
          reject(err);
        }
      }
    );
  });
};

第二步：使用map生成Promise数组，并用Promise.all等待完成

接下来，在一个异步函数里（或者用.then链式调用）处理所有上传任务：

// 假设在一个异步函数中执行（比如React的useEffect里，或者单独的async函数中）
const fetchImageUrls = async () => {
  try {
    // 用map生成所有上传任务的Promise数组
    const uploadPromises = images.map((image, index) => 
      uploadAndGetUrl(image, index, dataUser, name)
    );
    // 等待所有Promise完成，得到最终的URL数组
    const imageUrls = await Promise.all(uploadPromises);
    console.log("所有下载URL：", imageUrls);
    return imageUrls;
  } catch (err) {
    console.error("处理上传任务时出错：", err);
  }
};

// 调用函数
fetchImageUrls();

额外提醒 #

如果是在React等框架中使用，注意不要直接在useEffect的回调函数上标记async，可以用立即执行函数或者单独的async函数：

useEffect(() => {
  const fetchUrls = async () => {
    const urls = await fetchImageUrls();
    // 把urls存入state或者做其他业务处理
  };
  fetchUrls();
}, [images, dataUser, name]);

这样修改后，你就能正确获取到所有文件的下载URL数组了，而不是提前得到undefined。

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