NextJS中getStaticProps返回数据但客户端caseStudies为空问题排查

在NextJS项目中使用getStaticProps获取数据，该函数已成功将多个元素填充到caseStudies对象中并通过props返回，但页面组件主函数及客户端浏览器中读取caseStudies时，发现其为空数组，无法定位问题。

相关代码 #

import React, { useEffect, useRef, useState } from 'react';
import { useRouter } from 'next/router';
import Footer from '../shared/components/footer/footer.component';
import Header from '../shared/components/header/header.component';
import { ContentfulService } from '../core/contentfulService';

export default function IndexPage({ id, caseStudies, preview }) {

    console.dir(caseStudies);
    // 浏览器中显示为空数组

    const mid = Math.ceil(caseStudies.length / 2);
    const leftColCaseStudies = caseStudies.splice(0, mid);
    const rightColCaseStudies = caseStudies.splice(-mid);

    return (
        <div>
            <Header />
            <div>BODY</div>
            <Footer />
        </div>
    );
};

export async function getStaticProps({ preview = false }) {

    const service = new ContentfulService();
    const page = await service.fetchHomePageBySlug('homepage');
    const id = page.id;
    const caseStudies = page.cs;

    console.dir(caseStudies);
    // 此处显示多个caseStudies对象

    return {
        props: { id, caseStudies, preview }
    }
}

浏览器警告信息 #

Warning: Did not expect server HTML to contain a <div> in <div>.
    at div
    at div
    at div
    at div
    at div
    at div
    at IndexPage (webpack-internal:///./pages/index.tsx:42:20)
    at div
    at LocomotiveScrollProvider (webpack-internal:///./node_modules/react-locomotive-scroll/module/LocomotiveScroll.context.js:13:37)
    at LCApp (webpack-internal:///./pages/_app.tsx:55:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20746)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23395)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:323:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:820:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:944:27)

解决方案 #

• 处理数据序列化问题：Contentful返回的page.cs可能包含不可序列化的对象（如函数、Symbol或循环引用），NextJS在静态生成时会过滤这些内容，导致客户端接收空数组。可以在getStaticProps中将数据转为纯JSON格式：

  const caseStudies = JSON.parse(JSON.stringify(page.cs));
  

  或者手动提取需要的字段，只传递可序列化的简单数据结构。

• 避免直接修改props数组：组件中使用的splice方法会直接修改原props数组，虽然不是空数组的直接原因，但可能引发渲染异常。建议创建数组副本后操作，或使用不修改原数组的slice方法：

  // 使用slice替代splice
  const mid = Math.ceil(caseStudies.length / 2);
  const leftColCaseStudies = caseStudies.slice(0, mid);
  const rightColCaseStudies = caseStudies.slice(mid);
  

• 修复服务端与客户端DOM不匹配：浏览器警告是因为服务端渲染的DOM和客户端hydration生成的DOM不一致。检查Header、Footer及页面组件中的条件渲染逻辑，确保服务端和客户端的渲染输出一致。比如使用typeof window !== 'undefined'时，要保证服务端的 fallback 内容和客户端渲染结果匹配。

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