表单无法到达 Next.js 动态 API 使用 Notion API 更新 Notion 的数据库：错误 500

Question

我正在尝试使用 Next.JS api 与 Notion API 集成，以使用我网站中的表单值来完成表格。

表单逻辑如下所示。 我正在使用 Formik 来处理值和更改。 处理响应只允许我使用 Chakra-UI 的 toast 功能在屏幕上为用户显示反馈。

此 submitForm function 被设置为使用 POST 通过给定的 URL 传递值，遵循 Next.js 逻辑，用于动态 Next.js 逻辑 CA3A14347.CEDF84 路径。 ${urlPath}/api/submit/${title}将到达处理程序并使用title传递一个值来填充 formName 值。

//* This is the main file for the form component
import {useToast} from '@chakra-ui/react'
import PropTypes from 'prop-types'
import {useState} from 'react'
import FormPageStructure from './formPageStructure'
import {Form, Formik, Field} from 'formik'
function FormRenderer (props) {
  const {
    title,
    fields,
    buttonLabel,
    successMessage,
    errorMessage
  } = props

  const [serverState, setServerState] = useState()
  const toast = useToast()

  const handleServerResponse = (ok, msg) => {
    setServerState({ok, msg})
    toast({
      title: ok ? 'Mensagem enviada' : 'Erro ao enviar mensagem',
      description: msg,
      status: ok ? 'success' : 'error',
      duration: 9000,
      isClosable: true
    })
  }

  const urlPath = process.env.NODE_ENV === 'production' ? process.env.URL : 'http://localhost:3000'

  const usoArr = fields.filter(({fieldName}) => fieldName === 'uso')
  // console.log('uso', usoArr)
  const atuaçãoArr = fields.filter(({fieldName}) => fieldName === 'atuação')
  // console.log('atuação', atuaçãoArr)

  const submitForm = async values => {
    const res = await fetch(`${urlPath}/api/submit/${title}`, {
      method: 'POST',
      body: JSON.stringify(values, null, 2),
      headers: {'Content-Type': 'application/json'}
    })
    if (res.status === 201) {
      handleServerResponse(true, successMessage)
    } else {
      handleServerResponse(false, errorMessage)
    }
  }
  const initialValues = {
    nome: '',
    email: '',
    tel: '',
    empresa: '',
    mensagem: '',
    atuação: '',
    uso: ''
  }
  return (
    <FormPageStructure {...props}>
      <Formik initialValues={initialValues} name={title} onSubmit={submitForm} >
          <Form name={title}>
            <label htmlFor="nome">
              Nome
              <Field type="text" name="nome" />
            </label>
            <label htmlFor="email">
              Email
              <Field type="email" name="email" />
            </label>
            <label htmlFor="tel">
              Telefone
              <Field type="tel" name="tel" />
            </label>
            <label htmlFor="empresa">
              Empresa
              <Field type="text" name="empresa" />
            </label>
            <label htmlFor="atuação">
              Atuação
              <Field name="atuação" as="select">
                {atuaçãoArr[0].options.map((option, i) => (
                  <option key={i} value={option}>
                    {option}
                  </option>
                ))}
              </Field>
            </label>
            <label htmlFor="uso">
              Uso
              <Field name="uso" as="select">
                {usoArr[0].options.map((option, i) => (
                  <option key={i} value={option}>
                    {option}
                  </option>
                ))}
              </Field>
            </label>
            <label htmlFor="mensagem">
              <Field as="textarea" name="mensagem" />
            </label>
            <button type="submit">{buttonLabel || 'Enviar'}</button>
          </Form>
      </Formik>
    </FormPageStructure>
  )
}

FormRenderer.propTypes = {
  backgroundImage: PropTypes.object,
  backgroundImageSm: PropTypes.object,
  title: PropTypes.string,
  formHeadline: PropTypes.string,
  formTagline: PropTypes.array,
  formInfo: PropTypes.array,
  fields: PropTypes.array,
  buttonLabel: PropTypes.string,
  successMessage: PropTypes.string,
  errorMessage: PropTypes.string,
  privacyMessage: PropTypes.string
}

export default FormRenderer

处理程序postInfo function in../pages/api/submit/[...slug].js 应该接收 JSON 数据并使用 @notionh1/client 更新表以到达 Notion 的 ZDB974238714CA8ACE14D634。

const { Client } = require('@notionhq/client');

const notion = new Client({
  auth: process.env.NOTION_TOKEN
});

export default async function postInfo(req, res) {
  const { slug } = req.query;
  const formName = slug[0];
  /* Logic for url pushing: .../api/submit/formName/ -> tags form @ notion db */
  if (req.method !== 'POST') {
    return res
      .status(405)
      .json({ message: `Method ${req.method} not allowed` });
  }
  try {
    const { nome, email, tel, empresa, mensagem, atuação, uso, end1, end2, cep, cidade } = JSON.parse(req.body);
    await notion.pages.create({
      parent: {
        database_id: process.env.NOTION_DATABASE_ID
      },
      properties: {
        Nome: {
          title: [
            {
              text: {
                content: nome,
              },
            },
          ],
        },
        Email: {
          email: email
        },
        Telefone: {
          number: [
            {
              number: {
                content: tel
              }
            }
          ]
        },
        Empresa: {
          empresa: empresa
        },
        'Área de atuação': {
          select: {
            atuação: atuação
          }
        },
        'Tipo de uso': {
          select: {
            uso: uso
          }
        },
        Mensagem: {
          rich_text: [
            {
              text: {
                content: mensagem
              }
            }
          ]
        },
        'Endereço 1': {
          end1: end1
        },
        'Endereço 2': {
          end2: end2
        },
        CEP: {
          cep: cep
        },
        Cidade: {
          cidade: cidade
        },
        Formulário: {
          select: formName || null
        }
      },
    });
    res.status(201).json({ message: 'Form submitted successfully' });
  } catch (error) {
    res.status(500).json({ message: "there was an error" });
  }
}

但是，控制台返回 500（内部服务器错误），如下所示。 不确定是什么问题。

在启用所有内容功能的情况下，我的概念集成似乎设置正确。 刚刚将user capabilities更改为没有用户信息，但在 POST 上没有成功。 之前是Read user info including mail address