错误：如何从 getStaticProps 序列化数据：Next.js

Posted 2023-02-22

技术标签:

【中文标题】错误：如何从 getStaticProps 序列化数据：Next.js【英文标题】：Error: How to serialize data from getStaticProps : Next.js 【发布时间】：2021-05-12 08:42:45 【问题描述】：

我正在使用 Next.js，我尝试访问数据但收到此错误：

Error: Error serializing `.profileData` returned from `getStaticProps` in "/profile/[slug]".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

我的代码：

import  getAllBusinessProfiles  from '../../lib/api';

const Profile = ( allProfiles:  edges  ) => 
    return ( 
        <>
          <Head>
            <title>Profile</title>
          </Head>

          <Hero />

          <section>
            edges.map(( node ) => (
              <div key=node.id>
                  <Link href=`/profile/$node.slug`>
                    <a> node.businessInfo.name </a>
                  </Link>
              </div>
            ))
          </section>

        </>
     );

 
export default Profile;

export async function getStaticProps() 
    const allProfiles = await getAllBusinessProfiles();
    return 
      props: 
        allProfiles
      
    ;

从 api.js 获取所有业务配置文件：

const API_URL = process.env.WP_API_URL;

async function fetchAPI(query,  variables  = ) 
  const headers =  'Content-Type': 'application/json' ;

  const res = await fetch(API_URL, 
    method: 'POST',
    headers,
    body: JSON.stringify( query, variables )
  );

  const json = await res.json();
  if (json.errors) 
    console.log(json.errors);
    console.log('error details', query, variables);
    throw new Error('Failed to fetch API');
  
  return json.data;


export async function getAllBusinessProfiles() 
    const data = await fetchAPI(
      `
      query AllProfiles 
        businessProfiles(where: orderby: field: DATE, order: ASC) 
          edges 
            node 
              date
              title
              slug
              link
              uri
              businessInfo 
                name
                title
                company
                image 
                  mediaItemUrl
                  altText
                
                highlight
                phone
                city
                country
                facebook
                instagram
                email
                website
                profiles 
                  profile
                  profileInfo
                
                extendedProfile 
                  title
                  info
                
              
            
          
        
      
      
      `
    );
    return data?.businessProfiles;
;

这可能是什么错误？我在 Next.js 上使用了 getStaticProps 方法，但得到了上面的错误。请检查。谢谢。

错误：服务器错误错误：序列化从“/profile/[slug]”中的getStaticProps 返回的.profileData 时出错。原因：undefined 无法序列化为 JSON。请使用null 或省略此值。

我不知道是什么原因造成的。

【问题讨论】：

重复我在上一个问题中提到的内容：allProfiles 对象中的某些字段是undefined，它不能作为 JSON 序列化，因此无法从 getStaticProps 返回。将它们转换为 null 或完全忽略它们。我将如何解决它？请我投票结束这个问题，因为同一个用户已经问过这个问题：***.com/questions/66102884/… 你修好了吗？我有同样的错误。你能解决它吗？ 【参考方案1】：

在调用返回对象的异步函数时添加JSON.stringify。

尝试像这样修改您的 getStaticProps 函数。

export async function getStaticProps() 
    const profiles = await getAllBusinessProfiles();
    const allProfiles = JSON.stringify(profiles)

    return 
        props: 
             allProfiles
        
   ;

JSON.stringify() 方法将 javascript 对象或值转换为 JSON 字符串，如果指定了替换函数，则可选择替换值，如果指定了替换数组，则可选择仅包含指定的属性。

来源：MDN

【讨论】：

【参考方案2】：

我在使用 Mongoose 和 Next.js 时遇到了这个问题。

为了解决这个问题：我从 convert require 切换到 import 然后将结果包装在 JSON.parse(JSON.stringify(result)); 中。

好： import mongoose from 'mongoose';

不好： const mongoose = require('mongoose');

【讨论】：

【参考方案3】：

我在使用下一个 js 使用 redux 时遇到了同样的问题，原因是我将默认状态下的字段之一设置为未定义：

const INITIAL_STATE = 
  products: [],
  loading: false,
  error: undefined,
  cart: [],
;

error:undefined 导致了错误。因为“未定义”无法序列化：

export async function getStaticProps() 
    const allProfiles = await getAllBusinessProfiles();
    return 
      props: 
        allProfiles
      
    ;

您正在返回“allProfiles”，这是异步getAllBusinessProfiles() 的结果，它要么返回未定义、错误，要么返回对象的字段之一未定义。 “错误”对象在 javascript 中不可序列化

【讨论】：

我试图从getStaticProps 导出布尔值context.preview，而每当我退出预览模式时，该值就会出现undefined。我只是返回了!!context.preview，错误就解决了。【参考方案4】：

我在访问getStaticProps 中的 Vercel 系统环境变量时遇到了同样的序列化错误。

使用JSON.stringify 没有成功，但String() 有效。我的代码：

export async function getStaticProps() 
  const deploymentURL = String(process.env.NEXT_PUBLIC_VERCEL_URL);

  return 
    props: 
      deploymentURL,
    ,
  ;

感谢this GitHub issue 的启发

【讨论】：

【参考方案5】：

试试这个，它对我有用：

export async function getStaticProps() 
  const APP_URL = process.env.PUBLIC_NEXT_WEB_APP_URL;
  const res = await fetch(`$APP_URL/api/projects`);
  const projects = await res.json();
  return 
    props: 
      projects: projects?.data,
    ,
  ;

【讨论】：

【参考方案6】：

我在尝试使用 id 在数据数组中查找匹配项时遇到了同样的问题。我遇到的问题是数组中的项目的 id 是数字，而我从 params 获得的值是一个字符串。所以我所做的就是将数字 id 转换为字符串以匹配比较。

export async function getStaticProps( params ) 
  const coffeeStore = coffeeStoreData.find(
    (store) => store.id.toString() === params.slug[0]
  );
  return 
    props: 
      coffeeStore,
    ,
  ;

【讨论】：

以上是关于错误：如何从 getStaticProps 序列化数据：Next.js的主要内容，如果未能解决你的问题，请参考以下文章