使用getDownloadURL无法获取全部Firebase Storage文件URL问题

这是异步操作的时序问题：uploadBytes和getDownloadURL都是异步的Promise操作，你在循环触发这些任务后立刻打印uploadedFilesURL，此时大部分异步任务还没执行完，数组里的元素数量自然不稳定。加console.log后看似正常，只是日志输出的延迟给了异步任务更多完成时间，本质问题没解决。

用async/await结合Promise.all来统一处理所有异步任务，确保所有上传和URL获取完成后，再拿到完整的URL数组：

// 封装成异步函数处理上传逻辑
const uploadAndFetchURLs = async (uploadFiles) => {
  // 为每个文件生成上传+获取URL的Promise
  const urlTasks = uploadFiles.map(async (image) => {
    const storageRef = ref(storage, `images/${image.name + v4()}`);
    const uploadSnapshot = await uploadBytes(storageRef, image);
    const downloadURL = await getDownloadURL(uploadSnapshot.ref);
    return { file: image, url: downloadURL };
  });

  // 等待所有任务完成，拿到完整的URL数组
  const uploadedFilesURL = await Promise.all(urlTasks);
  // 此时数组里会有全部3个对象
  return uploadedFilesURL;
};

// 调用函数，后续可将返回的URL数组存入其他数据库
uploadAndFetchURLs(uploadToStorage).then((fullURLList) => {
  // 这里执行存入数据库的逻辑
  console.log(fullURLList); // 验证：输出3个对象
});

• async/await让异步代码逻辑更清晰，避免多层then嵌套的回调地狱
• Promise.all会等待所有传入的Promise执行完毕，返回包含所有结果的数组，保证你拿到全部3个URL对象
• 原代码中map只是触发异步任务但没处理返回的Promise，改成async map生成Promise数组后，用Promise.all等待所有任务完成就能得到完整结果

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