如何在Firebase Storage中获取用户文件详情并整合元数据与下载链接

问题原因 #

你当前的代码存在两个核心问题：

• 异步操作时序混乱：getMetadata、getDownloadURL都是异步API，你没有等待这些请求完成就打印myFiles，拿到的必然是空数组；而且两次遍历res.items分别调用两个接口，没办法保证元数据和下载URL的对应顺序，你写的counter每次遍历都会重置为0，赋值时必然会出现数据错位。
• 没有合理使用async/await特性：函数本身已经声明为async，却全程用then链式调用，增加了逻辑梳理的难度。

修正后的实现代码 #

const getUserFiles = async () => {
  if (!userUID) {
    return null;
  }
  const listRef = storageRef.child(userUID);
  try {
    const res = await listRef.listAll();
    // 为每个文件创建异步请求任务
    const fileTaskList = res.items.map(async (item) => {
      // 并行拉取单个文件的元数据和下载地址，减少等待耗时
      const [metadata, downloadUrl] = await Promise.all([
        item.getMetadata(),
        item.getDownloadURL()
      ]);
      // 组装所需字段
      return {
        name: metadata.name,
        timeCreated: metadata.timeCreated,
        link: downloadUrl
      };
    });
    // 等待所有文件的信息拉取完成
    const myFiles = await Promise.all(fileTaskList);
    // 此处可直接将myFiles渲染到页面
    console.log(myFiles);
    return myFiles;
  } catch (error) {
    // 可自行补充错误提示逻辑，比如权限不足、网络异常提示
    console.error('拉取用户文件失败：', error);
    return [];
  }
};

额外说明 #

• 不需要分开两次遍历文件列表，单个文件的元数据和下载地址可以并行请求，比串行请求速度更快。
• 如果需要拆分创建日期和创建时间，拿到timeCreated后可直接用JS日期方法处理：比如new Date(timeCreated).toLocaleDateString()获取日期，new Date(timeCreated).toLocaleTimeString()获取时间。
• 目前Firebase Storage没有提供一次性拉取所有文件元数据+下载地址的批量接口，每个文件单独请求这两个接口是官方标准的使用方式。

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