ReactJS中Firebase Storage内PDF无法显示问题修复求助

你已成功获取Firebase Storage里dataset文件夹下的PDF文件URL，但页面无法显示的核心问题是未将URL存入组件状态，也未在JSX中渲染对应的PDF展示元素。以下是具体修复方案：

关键改动说明 #

• 引入useState钩子存储PDF URL列表，确保状态更新时组件自动重渲染
• 在loadImages中更新状态，把获取到的URL列表保存起来
• 在JSX里遍历URL列表，用<embed>或<iframe>标签展示PDF，同时提供下载链接

修改后的ForwardPE组件代码 #

import React, { useState, useEffect } from 'react';
import { storage } from "../config/firebase";
import { ref, listAll, getDownloadURL } from "firebase/storage"

function ForwardPE() {
  // 用状态存储PDF的URL列表
  const [pdfUrls, setPdfUrls] = useState([]);

  const fetchImages = async () => {
    const storageRef = ref(storage, "dataset"); // ref是同步方法，无需await
    const result = await listAll(storageRef);

    const urlPromises = result.items.map((imageRef) => getDownloadURL(imageRef));
    return Promise.all(urlPromises);
  };

  const loadImages = async () => {
    const urls = await fetchImages();
    setPdfUrls(urls); // 将URL存入状态，触发组件重渲染
  };

  // 用useEffect确保组件挂载时只调用一次loadImages
  useEffect(() => {
    loadImages();
  }, []);
      
  return (
    <div className="file-grid">
      <div className="file-wrap">
        <h1>PDF FILES HERE</h1>
        {/* 遍历URL列表，渲染每个PDF */}
        {pdfUrls.map((url, index) => (
          <div key={index} className="pdf-item" style={{ margin: '20px 0', width: '800px', height: '600px' }}>
            {/* 用embed标签展示PDF */}
            <embed 
              src={url} 
              type="application/pdf" 
              width="100%" 
              height="100%"
              title={`PDF 文件 ${index + 1}`}
            />
            {/* 添加下载链接 */}
            <a href={url} download className="pdf-download-link">
              下载文件 {index + 1}
            </a>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ForwardPE;

额外注意事项 #

1. Firebase Storage权限检查：确保dataset文件夹下的PDF文件有可访问权限，否则即使拿到URL也无法加载。可在Firebase控制台的Storage规则中临时设置测试规则（上线后需改为安全规则）：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /dataset/{allPaths=**} {
      allow read: if true;
      allow write: if request.auth != null;
    }
  }
}

2. 避免重复调用异步函数：原代码在组件顶层直接调用loadImages()会导致每次组件渲染都执行一次，改用useEffect加空依赖数组，确保仅在组件挂载时执行一次。
3. 修正ref方法的调用：原代码中await ref(...)是错误的，ref是同步函数，无需添加await。

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