Next.js中PDF-Lib填充PDF时useContext状态值获取异常求助

问题核心原因 #

你遇到的问题本质是组件渲染时机与异步函数执行时机不匹配：

• 终端输出undefined是因为组件初始渲染（或SSR阶段）时，从Cookie加载的Context状态还未完成初始化，此时执行console.log或异步PDF生成函数，自然拿不到有效值；
• HTML标签能正常显示，是因为React的响应式渲染机制：当状态从Cookie加载完成后，组件会重新渲染更新DOM，但之前已经执行的异步函数不会重新触发，导致PDF填充用的还是初始的undefined。

解决方案 #

1. 等待状态就绪后再执行PDF生成 #

使用useEffect监听borangPks.totalgrant的变化，只有当该值存在（非undefined/空）时，才调用PDF-Lib的生成逻辑。

2. 代码修正示例 #

假设你的Pdf组件原代码存在时机错误，修改后代码如下：

'use client'; // Next.js 13+ App Router 需添加此指令，确保是客户端组件
import { useContext, useEffect, useState } from 'react';
import { BorangContext } from '../contexts/BorangContext';
import { PDFDocument } from 'pdf-lib';

export default function Pdf() {
  const borangPks = useContext(BorangContext);
  const [pdfPreviewUrl, setPdfPreviewUrl] = useState(null);

  useEffect(() => {
    // 过滤未就绪的状态，避免无效执行
    if (!borangPks.totalgrant) return;

    const generateFilledPdf = async () => {
      // 此时能拿到正确的用户输入值
      console.log('当前totalgrant值:', borangPks.totalgrant);
      
      // 加载模板PDF（替换为你的模板文件路径/ArrayBuffer）
      const templatePdf = await fetch('/templates/grant-form.pdf').then(res => res.arrayBuffer());
      const pdfDoc = await PDFDocument.load(templatePdf);
      
      // 填充文本域
      const form = pdfDoc.getForm();
      const totalGrantField = form.getTextField('totalgrant');
      totalGrantField.setText(String(borangPks.totalgrant));
      
      // 生成预览用的Blob URL
      const pdfBytes = await pdfDoc.save();
      const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
      setPdfPreviewUrl(URL.createObjectURL(pdfBlob));
    };

    generateFilledPdf();
  }, [borangPks.totalgrant]); // 仅当totalgrant变化时重新执行

  return (
    <div className="pdf-container">
      <p>已输入的Total Grant：{borangPks.totalgrant}</p>
      {pdfPreviewUrl && (
        <iframe 
          src={pdfPreviewUrl} 
          width="100%" 
          height="600px" 
          title="填充后的PDF预览"
        />
      )}
    </div>
  );
}

3. 额外排查点 #

• 确认BorangContext中读取Cookie的逻辑是在客户端环境执行：Next.js中可通过typeof window !== 'undefined'判断，避免SSR阶段因无window对象导致Cookie读取失败；
• 若使用Next.js Pages Router，确保/pdf页面是客户端渲染（或在getServerSideProps中处理Cookie传递，但更推荐客户端读取状态）。

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