Firebase多文件上传后无法获取下载URL及返回undefined问题

问题现象 #

• 文件可成功上传至Firebase Storage，但无法获取文件下载URL
• 调用fileUpload函数时控制台输出undefined
• Promise捕获到错误（控制台输出"error"），但文件上传流程不受影响

原代码问题分析 #

1. 函数未返回Promise：fileUpload内部创建了Promise但未将其返回，导致调用时result为undefined。
2. 异步操作未等待：在forEach循环中，触发上传操作后立刻执行resolve(fileArr)，此时uploadBytes和getDownloadURL的异步逻辑尚未完成，fileArr仍是空数组，后续的push操作无法改变已resolve的结果。
3. 错误的reject逻辑：if (!fileArr)永远不会触发，因为fileArr初始化是空数组而非null/undefined，你看到的"error"提示是由于Promise过早resolve后，后续异步流程中可能出现的未处理错误导致。

修正后的代码 #

上传函数（使用async/await优化异步流程） #

const fileUpload = async (name: string) => {
  // 先校验文件是否存在
  if (!file) {
    throw new Error("无待上传文件");
  }

  // 将文件对象转为数组格式
  const objectArr = Object.values(file);

  // 并行处理所有文件的上传与URL获取
  const fileArr = await Promise.all(
    objectArr.map(async (item: any) => {
      const fileRef = ref(storage, `${name}/${item.name}`);
      // 等待文件上传完成
      await uploadBytes(fileRef, item);
      // 等待获取下载URL
      const url = await getDownloadURL(fileRef);
      return { name: item.name, url, type: item.type };
    })
  );

  return fileArr;
};

调用方式（使用async/await处理异步结果） #

const letsTry = async () => {
  try {
    const result = await fileUpload("anyname");
    console.log(result); // 输出包含所有文件信息与下载URL的数组
  } catch (error) {
    console.error("上传失败:", error);
  }
};

修正说明 #

• 使用async/await简化异步流程，代码更易读
• 通过Promise.all并行处理多文件上传，提升效率
• 确保等待所有上传和URL获取操作完成后再返回结果
• 增加文件存在性校验，提前抛出明确错误

内容的提问来源于stack exchange，提问作者José Carlos