React Native无法从Firebase Storage获取全部文件及下载URL问题

问题描述 #

我编写了如下React Native代码，用于从Firebase Storage指定文件夹中获取所有文件及其下载URL：

import { uploadString, getDownloadURL, listAll } from 'firebase/storage';
 const listRef = sRef(storage, paramKey)
  // Find all the prefixes and items.
    listAll(listRef)
    .then((res) => {
      res.prefixes.forEach((folderRef) => {
        // All the prefixes under listRef.
        // You may call listAll() recursively on them.
      });
      res.items.forEach((itemRef) => {
        // All the items under listRef.
        console.log("ItemRef: " + itemRef)
        itemRef.getDownloadURL().then((url =>{
          console.log("Download Url: " + url)
        }))
      });
    }).catch((error) => {
      // Uh-oh, an error occurred!
      console.log(error)
    });
  return (

实际运行后仅返回1条ItemRef（Firebase Storage控制台显示该文件夹下有4个内容），且未输出任何下载URL。同时导入的getDownloadURL提示已声明但未被使用，即使调用也无效。

疑问 #

1. 为何仅返回1条ItemRef而非4条？
2. 为何无法获取下载URL，且getDownloadURL始终提示未使用？

问题解答 #

1. 仅返回1条ItemRef的原因 #

• 权限限制：Firebase Storage安全规则未授权读取全部文件，导致只能返回符合规则的文件。可临时开放权限测试（上线前务必改回严格规则）。
• 内容类型混淆：控制台显示的4个内容中，可能有部分是子文件夹而非文件。res.items只返回当前路径下的文件，子文件夹会被归类到res.prefixes中，可打印res.prefixes.length确认。
• 路径错误：paramKey对应的Storage路径与实际文件夹路径不匹配，导致读取到的不是目标文件夹。
• 缓存影响：Firebase Storage的列表操作存在缓存，可清除缓存或重新部署规则后重试。

2. 无法获取下载URL且getDownloadURL提示未使用的原因 #

Firebase Storage v9+采用模块化API，你导入的getDownloadURL是独立函数，但代码中错误调用了itemRef.getDownloadURL()（这是旧版命名空间API的写法），导致：

• IDE检测到导入的getDownloadURL未被使用，给出提示
• 调用无效，无法获取下载链接

修正方法：使用导入的独立getDownloadURL函数，传入文件引用作为参数：

// 替换原itemRef.getDownloadURL().then(...)为：
getDownloadURL(itemRef)
  .then(url => {
    console.log("Download Url: ", url);
  })
  .catch(err => {
    console.log("获取下载链接失败: ", err);
  });

修正后的完整代码示例 #

// 注意：需确保导入了ref方法（这里重命名为sRef，和你的变量名对应）
import { uploadString, getDownloadURL, listAll, ref as sRef } from 'firebase/storage';

const listRef = sRef(storage, paramKey);
listAll(listRef)
  .then((res) => {
    // 检查子文件夹数量，排查是否有内容被归类为文件夹
    console.log("子文件夹数量: ", res.prefixes.length);
    res.prefixes.forEach((folderRef) => {
      // 如需遍历子文件夹，递归调用listAll
      listAll(folderRef).then(subRes => {
        subRes.items.forEach(subItemRef => {
          getDownloadURL(subItemRef).then(url => {
            console.log("子文件夹文件下载链接: ", url);
          });
        });
      });
    });

    console.log("当前文件夹文件数量: ", res.items.length);
    res.items.forEach((itemRef) => {
      console.log("ItemRef: ", itemRef);
      // 使用正确的模块化API获取下载链接
      getDownloadURL(itemRef)
        .then((url) => {
          console.log("Download Url: ", url);
        })
        .catch(err => {
          console.log("获取下载链接失败: ", err);
        });
    });
  })
  .catch((error) => {
    console.log("列表获取失败: ", error);
  });

内容的提问来源于stack exchange，提问作者L.Calvin