如何在React/Next.js应用中获取Google Form字段及数据？

排查404 "Requested entity was not found"错误 #

• 确认表单ID正确性：从Google Form的编辑链接中提取纯ID（例如https://docs.google.com/forms/d/{FORM_ID}/edit中的{FORM_ID}），不要包含任何额外参数或路径。
• 启用Google Forms API：登录Google Cloud控制台，找到Forms API并启用，确保使用的项目与表单关联。
• 关联表单到Cloud项目：打开Google Form编辑器，点击右上角三个点→脚本编辑器，此时会自动将表单关联到一个Google Cloud项目（无则创建），确认该项目已启用Forms API。
• 权限验证：
  • 若使用OAuth登录，确保操作账号拥有该表单的编辑/查看权限，且OAuth consent screen已添加Forms API的权限范围（如https://www.googleapis.com/auth/forms.body.readonly）。
  • 若使用服务账号，需将服务账号邮箱添加为表单的协作者。

将Google Form数据接入React/Next.js的两种方案 #

方案一：使用Google Forms API（适合读取表单结构或历史响应数据） #

1. 配置OAuth认证：在Google Cloud控制台创建Web应用类型的OAuth客户端ID，设置授权回调URL为你的Next.js应用域名（如http://localhost:3000/api/auth/callback/google）。
2. 集成NextAuth.js：在Next.js项目中通过NextAuth.js实现Google登录，获取访问令牌用于API调用。
3. 编写API路由：创建Next.js API路由封装Forms API调用，示例代码：

// pages/api/forms/[formId].js
import { getSession } from 'next-auth/react';

export default async function handler(req, res) {
  const session = await getSession({ req });
  if (!session) return res.status(401).json({ error: '未授权' });

  const { formId } = req.query;
  const apiRes = await fetch(`https://forms.googleapis.com/v1/forms/${formId}`, {
    headers: { Authorization: `Bearer ${session.user.accessToken}` },
  });

  if (!apiRes.ok) {
    const errorData = await apiRes.json();
    return res.status(apiRes.status).json(errorData);
  }

  const formData = await apiRes.json();
  res.status(200).json(formData);
}

4. 前端调用：在React组件中通过fetch或Axios调用上述API路由，获取并展示数据。

方案二：使用Google Apps Script Webhook（适合实时接收新提交数据） #

这种方式无需依赖OAuth，适合用户提交表单后实时推送数据到你的应用：

1. 编写Apps Script：打开Google Form→脚本编辑器，编写提交触发函数：

// Google Apps Script代码
function onFormSubmit(e) {
  const itemResponses = e.response.getItemResponses();
  const submitData = {};

  itemResponses.forEach(item => {
    submitData[item.getItem().getTitle()] = item.getResponse();
  });

  UrlFetchApp.fetch('https://your-nextjs-domain.com/api/form-webhook', {
    method: 'POST',
    contentType: 'application/json',
    payload: JSON.stringify(submitData),
  });
}

2. 设置触发器：在脚本编辑器中点击→编辑→当前项目的触发器→添加触发器，选择onFormSubmit函数，事件类型设为表单提交。
3. Next.js接收路由：创建API路由处理Webhook请求：

// pages/api/form-webhook.js
export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).json({ error: '仅支持POST请求' });

  const submitData = req.body;
  // 此处可将数据存入数据库或进行其他业务处理
  console.log('收到表单提交数据:', submitData);

  res.status(200).json({ message: '数据接收成功' });
}

4. 测试验证：提交一次Google Form，查看Next.js应用的日志，确认数据已接收。

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