NextJS中如何从Paperform外部回调函数获取表单数据？

在Vanilla JS里直接定义全局函数myGlobalFunction就能接收Paperform的提交数据，但Next.js存在服务端渲染（SSR）特性，直接定义全局函数会因window对象不存在报错，可通过以下两种方案实现：

方案1：全局注册（所有页面可用） #

在_app.js或_app.tsx中注册全局函数，确保所有页面都能响应Paperform的回调：

// pages/_app.js
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // 注册全局回调函数
    window.myGlobalFunction = (data) => {
      console.log('收到Paperform提交数据：', data);
      // 这里可添加数据处理逻辑，比如存入状态、发送至后端等
    };

    // 组件卸载时清理全局函数，避免内存泄漏
    return () => {
      delete window.myGlobalFunction;
    };
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

方案2：单页面注册（仅目标页面可用） #

如果只有特定页面嵌入了Paperform，可直接在该页面组件内注册：

// pages/your-form-page.js
import { useEffect, useState } from 'react';

export default function FormPage() {
  const [submissionData, setSubmissionData] = useState(null);
  const [showSuccessTip, setShowSuccessTip] = useState(false);

  useEffect(() => {
    window.myGlobalFunction = (data) => {
      // 保存数据到组件状态
      setSubmissionData(data);
      // 显示成功提示
      setShowSuccessTip(true);
      // 可选：将数据发送到后端API
      // fetch('/api/save-form-data', {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json' },
      //   body: JSON.stringify(data)
      // });
    };

    return () => {
      delete window.myGlobalFunction;
    };
  }, []);

  return (
    <div>
      {/* 成功提示区域 */}
      {showSuccessTip && (
        <div className="success-alert">
          提交成功！
          <pre>{JSON.stringify(submissionData, null, 2)}</pre>
        </div>
      )}
      {/* 嵌入Paperform表单 */}
      <iframe src="你的Paperform表单链接" width="100%" height="600" frameBorder="0"></iframe>
    </div>
  );
}

关键注意事项 #

• 必须通过useEffect注册函数：useEffect仅在客户端渲染阶段执行，避免SSR时因window对象不存在抛出错误。
• 清理全局函数：组件卸载时删除window.myGlobalFunction，防止多页面重复注册引发逻辑冲突。

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