使用react-pdf库无法加载PDF文档且无报错如何解决

• 补充必填的Page组件
  react-pdf的Document组件仅为PDF文档容器，必须嵌套Page组件指定渲染的页码才能看到内容，你可以先固定渲染第一页测试，同时补充错误回调方便定位问题：

import { Document, Page, pdfjs } from "react-pdf";
// ...其他逻辑保持不变
<Document
  file={file}
  onLoadSuccess={onDocumentLoadSuccess}
  onLoadError={(err) => console.log("文档加载失败：", err)}
  onSourceError={(err) => console.log("资源加载失败：", err)}
>
  <Page pageNumber={1} />
</Document>

• 检查静态资源路径
  你初始默认加载的./invoice.pdf是相对路径，如果你使用的是CRA、Vite等脚手架，需要把PDF文件放到项目的public目录下，路径改为/invoice.pdf，你可以直接在浏览器地址栏输入该PDF的完整访问路径，确认文件可以正常被访问到。
• 引入必要的样式文件
  react-pdf渲染PDF需要配套的样式支持，缺失样式会导致内容被隐藏或者布局异常，需要在代码顶部引入对应样式：

import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
import 'react-pdf/dist/esm/Page/TextLayer.css';

• 验证worker加载正常
  你可以打开浏览器控制台的网络面板，确认pdf.worker.min.js资源能够正常加载，没有返回404或者跨域错误，如果CDN资源访问异常，可以改为本地引入worker的方式：

import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;

• 检查依赖组件导入
  你代码中使用的Box组件如果是来自第三方UI库（比如MUI），需要确认已经正确导入，未导入的组件会导致整个片段渲染失败，部分场景下不会在控制台抛出明确错误。

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