如何同时调用Firebase Storage的getDownloadURL与getMetaData并合并结果？

我有一个用于渲染Firebase Storage中已上传媒体（图片或视频）的组件。当前使用useEffect钩子从Storage拉取数据并存入状态，代码如下：

const [uploadedMedia, setUploadedMedia] = useState([]);

useEffect(() => {
  const uploadedMediaRef = ref(storage, "appTutorials/" + data.id + "/");

  const getMedia = async () => {
    setUploadedMedia([]);
    listAll(uploadedMediaRef).then((resp) => {
      resp.items.forEach((item) => {
        getDownloadURL(item).then((url) => {
          setUploadedMedia((prev) => [...prev, url]);
        });
      });
    });
  };
  getMedia();
}, []);

初始渲染时，应用会列出Storage中的所有数据，循环调用Firebase的getDownloadURL方法获取下载链接，并将链接存入uploadedMedia状态，后续通过映射渲染媒体。

但我希望同时调用getMetadata方法获取元数据，以此判断媒体类型，从而对图片使用<img>标签、视频使用<iframe>或<video>标签进行条件渲染。需要将URL和元数据结果合并为如下格式的对象数组：

[
    {
        url: "https://link-to-media-here",
        type: "png",
    }
]

请问该如何实现这一需求？

可以通过并行处理异步请求+一次性更新状态的方式实现，同时修正原代码中依赖缺失的问题，具体修改如下：

const [uploadedMedia, setUploadedMedia] = useState([]);

useEffect(() => {
  const uploadedMediaRef = ref(storage, `appTutorials/${data.id}/`);

  const getMedia = async () => {
    try {
      setUploadedMedia([]);
      // 获取所有媒体文件引用
      const resp = await listAll(uploadedMediaRef);
      // 对每个文件并行获取下载链接和元数据
      const mediaPromises = resp.items.map(async (item) => {
        // 并行发起两个请求，提升效率
        const [url, metadata] = await Promise.all([
          getDownloadURL(item),
          getMetadata(item)
        ]);
        // 从contentType中提取文件类型（如image/png → png）
        const type = metadata.contentType?.split('/')[1] || 'unknown';
        return { url, type };
      });
      // 等待所有异步操作完成，得到完整的媒体数组
      const mediaArray = await Promise.all(mediaPromises);
      // 一次性更新状态
      setUploadedMedia(mediaArray);
    } catch (error) {
      console.error('获取媒体数据失败:', error);
    }
  };

  getMedia();
}, [data.id]); // 依赖数组添加data.id，确保id变化时重新拉取数据

关键说明： #

1. 用map+Promise.all替代forEach：避免forEach中异步操作导致的状态多次更新，同时并行处理所有文件的请求，提升整体效率。
2. 并行获取URL和元数据：通过Promise.all同时发起getDownloadURL和getMetadata请求，减少等待时间。
3. 提取媒体类型：从元数据的contentType字段中提取后缀（如image/jpeg→jpeg），如果contentType不存在则默认设为unknown。
4. 修正依赖数组：原代码依赖data.id但未加入依赖数组，会导致data.id变化时无法重新拉取对应文件夹的媒体，现在添加后保证数据与id同步。
5. 错误处理：加入try/catch捕获异步请求中的错误，便于调试和异常处理。

后续渲染时，就可以根据type字段做条件渲染：

{uploadedMedia.map((media, index) => {
  if (media.type.startsWith('image')) {
    return <img key={index} src={media.url} alt="上传的图片" />;
  } else if (media.type.startsWith('video')) {
    return <video key={index} src={media.url} controls />;
  }
  return null;
})}

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