React自定义Hook获取Firebase Storage图片URL异常求助

你的问题核心是**Promise.all没有正确等待getDownloadURL的Promise完成**——因为你往promises数组里塞的是包含Promise的对象，而非Promise本身。Promise.all只会处理数组中的Promise元素，不会自动解析对象内部的Promise属性。

修改后的代码如下：

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

export const useLogos = () => {
  const storage = getStorage();
  const listRef = ref(storage, "images/logos");
  const [logoList, setLogoList] = useState([]);

  useEffect(() => {
    listAll(listRef)
      .then((res) => {
        // 把每个itemRef转换成一个Promise，resolve后得到包含name和URL的对象
        const promises = res.items.map((itemRef) => 
          getDownloadURL(itemRef).then(url => ({
            name: itemRef.name,
            logoURL: url
          }))
        );
        return Promise.all(promises);
      })
      .then((urlArray) => {
        setLogoList(urlArray);
      })
      .catch(err => {
        // 添加错误处理，捕获存储操作的异常
        console.error("获取Logo列表失败:", err);
      });
  }, []);

  return { logoList };
};

关键修改点：

• 用map直接生成Promise数组：每个itemRef对应一个Promise，这个Promise会先等待getDownloadURL完成，再返回包含文件名和解析后URL的对象
• Promise.all现在等待的是真正的Promise数组，所有Promise完成后，返回的就是包含完整数据的对象数组，此时logoURL已经是解析后的字符串
• 新增了错误捕获，避免因存储操作失败导致的未处理Promise异常

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