Firebase Storage下载图片时最后一个文件未完整下载如何解决

问题根因 #

该问题和fetch是否等待下载完成无关，是代码存在数组索引越界错误，加上异步逻辑编写不规范导致的：

• 核心错误出现在processArray的循环逻辑中：你调用下载方法时传入的是urls[i + 1]，当循环变量i从0遍历到4（urls总长度为5，数组最大下标为4）时，最后一次循环i+1=5属于越界取值，拿到的值是undefined。fetch请求undefined相当于请求当前页面地址，返回的是页面HTML内容，所以你看到最后一个blob是2KB左右的text/html类型，并非图片资源。
• 你误以为前4张下载正常，实际是巧合：你实际请求的是urls[1]到urls[4]共4张图片，原本应该下载的urls[0]第一张图片根本没有被发起请求，最后一个请求的是无效地址。

其他可优化的不规范逻辑 #

现有代码还存在多处异步冗余编写问题，容易引发额外异常：

• getHTML函数不需要双层嵌套Promise，fetch本身就返回Promise，你额外包裹的Promise没有配置catch逻辑，请求报错时会进入永久pending状态。
• processArray也不需要额外包裹Promise，async函数本身就返回Promise，循环内顺序await的逻辑可以大幅简化。

修复后完整代码 #

import {
  getStorage,
  ref,
  listAll,
  getDownloadURL
} from "firebase/storage";

const storage = getStorage();
const listRef = ref(storage, 'images');

const firebaseDownloadHandler = async() => {
  // 简化fetch下载逻辑，直接返回Promise，添加错误捕获
  function getImageBlob(url) {
    return fetch(url, {
      method: 'GET'
    })
    .then(res => {
      if(!res.ok) throw new Error(`请求失败，状态码：${res.status}`)
      return res.blob()
    })
  }

  const res = await listAll(listRef);
  const urlRequests = res.items.map(itemRef => getDownloadURL(itemRef))
  const urls = await Promise.all(urlRequests);
  
  // 简化循环逻辑，直接按索引顺序下载
  const finalResult = [];
  for (let i = 0; i < urls.length; i++) {
    const blob = await getImageBlob(urls[i]);
    finalResult.push(blob);
  }

  return finalResult;
}

export default firebaseDownloadHandler;

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