为什么我会收到“错误：序列化从 getStaticProps 返回的 ___ 时出错”？答案

【问题标题】：Why am I getting 'Error: Error serializing ___ returned from getStaticProps'?为什么我会收到“错误：序列化从 getStaticProps 返回的 ___ 时出错”？
【发布时间】：2021-04-23 02:23:06
【问题描述】：

当我在getStaticProps 内部调用时收到以下错误，我不知道为什么：

Error: Error serializing `.lingo` returned from `getStaticProps` in "/".
Reason: `undefined` cannot be serialized as JSON.

我已将完整的应用代码放在CodeSandbox 上。它无法访问 API，但它确实显示了定义的位置。

当我在 GraphQL 操场上运行以下查询时，我得到了预期的响应：

query {
   allTerms {
      id
      term
      slug
      lead
   }
}

您可以看到该查询包含在沙盒的modules/lingo/services 目录下的lingo.service.js 中，但主页出现Error serializing 错误。我的函数export async function getAll() 不正确还是我在getStaticProps 中调用错误？

【问题讨论】：

任何时候您在错误消息中看到cannot ____ undefined 或类似内容，这是因为您的变量之一在不应该等于未定义时。

标签： json next.js apollo getstaticprops

【解决方案1】：

await getAll() 很可能返回 undefined，它不是可序列化的 JSON。默认为null 将是解决问题的一种方法。

export async function getStaticProps(context) {
  return {
    props: { lingo: (await getAll()) ?? null },
  };
}

【讨论】：

谢谢。 null 不会返回任何东西吗？有需要响应的项目，当在 GraphQL Playground 中查询时它们会得到响应。另一个问题是 lingo.length 现在返回 null 并导致 TypeError: Cannot read property 'length' of null 错误。
您需要围绕它调整您的代码，可能是null。例如，在访问 lingo.length 之前添加额外的检查。或者当它为 null 时甚至根本不渲染某些组件。