Firebase Storage listAll()与getDownloadURL()配合失效问题排查

我在工具文件中编写了一个函数，用于收集Firebase Storage中路径为proj_name/screenshots/uid/下的所有图片URL（该文件夹下有8张图片），并在Next.js的[id]页面中通过getServerSideProps()导入使用。但使用console.log输出URL数组长度时始终显示0，请问可能是什么原因？

工具文件代码 #

...
export const getImages = async (dir) => {
  let data = []
  const storage = getStorage()
  const listRef = ref(storage, dir)
  await listAll(listRef)
    .then(res => {
      res.items.forEach(itemRef => {
        getDownloadURL(itemRef)
          .then(url => {
            data.push(url)
          })
      })
    })
  return data
}

Next.js页面文件代码 #

import { getItems, getImages } from "../../utils/firebase"


export const getServerSideProps = async (context) => {
  const id = context.params.id
  const item = await getItems(id)
  const screenshots_urls = await getImages('proj_name/screenshots/' + id)
  return{
    props: { item, screenshots_urls }
  }
}


const Details = ({ item, screenshots_urls }) => {
  return (
    <>
      {
        console.log(screenshots_urls.length)
      }
    </>
  )
}
 
export default Details

核心原因：异步操作未正确等待 #

你的getImages函数存在异步逻辑处理错误：

• listAll虽然用了await，但内部res.items.forEach里的getDownloadURL是异步操作，你没有等待这些操作完成就直接返回了data数组。
• forEach不支持异步等待，即使内部用了.then，外部的await也无法捕获这些异步任务的完成状态，导致函数在所有URL获取完成前就返回了空数组。

修复方案 #

推荐使用Promise.all配合map来等待所有异步任务完成：

export const getImages = async (dir) => {
  const storage = getStorage()
  const listRef = ref(storage, dir)
  const res = await listAll(listRef)
  // 把每个itemRef转为获取URL的Promise，批量等待全部完成
  const data = await Promise.all(
    res.items.map(itemRef => getDownloadURL(itemRef))
  )
  return data
}

额外排查点 #

• 确认路径proj_name/screenshots/${id}拼写正确，注意大小写、斜杠位置等细节。
• 检查Firebase Storage权限规则，确保服务器环境（getServerSideProps运行在服务端）有读取该文件夹的权限。
• 验证context.params.id是否正确获取到了目标uid，避免路径拼接错误。

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