React/Next.js组件从Firebase Storage获取下载链接为空求助

核心问题1：异步操作未等待完成就更新状态 #

你在forEach里调用的itemRef.getDownloadURL()是异步Promise操作，forEach不会等待这些Promise完成，就直接执行了setPdfUrls(urls)，此时urls数组还没被填充任何链接，所以pdfUrls始终为空。

核心问题2：状态初始值未正确设置 #

useState()的初始值是undefined，组件首次渲染时pdfUrls为undefined，调用map方法会直接报错，应该初始化为空数组[]。

修改后的代码 #

import React, { useState, useEffect } from 'react';
import { projectStorage } from '@/firebaseConfig'; 

const PDFViewer = () => {
  // 初始化为空数组，避免首次渲染map报错
  const [pdfUrls, setPdfUrls] = useState([]);

  useEffect(()=>{
    const fetchPdfUrls = async () => {
      try {
        const storageRef = projectStorage.ref();
        const pdfRef = storageRef.child('myfirebaselocationpath/uploadeddocs/'); 
        const result = await pdfRef.listAll();
        
        // 使用Promise.all等待所有getDownloadURL请求完成
        const urls = await Promise.all(
          result.items.map(itemRef => itemRef.getDownloadURL())
        );
        
        setPdfUrls(urls);
      } catch (error) {
        console.error('Error retrieving PDF files:', error);
      }
    };

    fetchPdfUrls();
  },[])

  return (
    <div>
      <h1>PDF Viewer</h1>
      {pdfUrls.map((url) => (
        <iframe key={url} src={url} width="100%" height="600px" />
      ))}
    </div>
  );
};

export default PDFViewer;

关键修改说明 #

• 改用async/await语法处理异步操作，逻辑更清晰；
• 用Promise.all包裹所有getDownloadURL的Promise，确保所有链接都获取到后再更新状态；
• 将pdfUrls初始值设为[]，避免首次渲染时因为undefined调用map报错；
• 把整个异步逻辑封装到fetchPdfUrls函数中，更符合React useEffect的最佳实践。

另外，需确认Firebase Storage的安全规则是否允许读取该路径下的文件，如果规则限制了未授权访问，也会导致无法获取文件和链接。

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