Next.js 13使用getServerSideProps时map读取未定义属性错误求助

问题背景 #

使用Next.js 13构建前端，需通过服务端渲染（SSR）从指定链接获取JSON数据填充网站。使用getStaticProps时功能正常，但切换为getServerSideProps后持续触发上述错误。由于网站需应对数据库动态变更，无法使用静态站点生成（SSG）。

项目目录结构 #

当前代码 #

服务端渲染代码 #

export async function getServerSideProps(){
  const res = await fetch("https://www.jsonkeeper.com/b/4G1G");
  const data = await res.json();

  return {
    props: {
      todos: data
    }
  }
}

页面组件代码 #

export default function Home({ todos }) {
  return (
    // {styles.container}
    <div className="bg-white">
     <Head>
        <title>PAPA AIRBNB</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
    </Head>

    {todos?.length === 0 ? (
      <div>
        loading...
      </div>
    ) : (
      todos.map((todos) => (
        <div key={todos.id}>
          <p>
            {todos.id}: {todos.title}
          </p>
        </div>
      ))
    )}
    </div>
  )
}

问题分析 #

你请求的JSON接口返回的是包含todos数组的对象（结构为{"todos": [...]}），但在getServerSideProps中直接将整个响应对象赋值给了todos props，导致组件中拿到的todos是对象而非数组。对象没有map方法，且todos?.length判断会因对象无length属性进入else分支，最终触发报错。

解决方案 #

1. 修正数据获取逻辑 #

在getServerSideProps中正确提取todos数组，并添加错误处理避免请求失败时出现异常：

export async function getServerSideProps(){
  try {
    const res = await fetch("https://www.jsonkeeper.com/b/4G1G");
    // 校验请求是否成功
    if (!res.ok) throw new Error('数据请求失败');
    const data = await res.json();

    return {
      props: {
        todos: data.todos || [] // 确保即使接口返回的todos不存在，也返回空数组
      }
    }
  } catch (error) {
    console.error('获取数据出错:', error);
    // 出错时返回空数组，避免组件崩溃
    return {
      props: {
        todos: []
      }
    }
  }
}

2. 优化组件内数据校验 #

在组件中确保todos是数组，避免因异常数据导致报错，同时修正循环变量名（避免与数组重名）：

import Head from 'next/head'; // 补充Head的导入

export default function Home({ todos }) {
  // 确保todos始终是数组
  const validTodos = Array.isArray(todos) ? todos : [];

  return (
    <div className="bg-white">
     <Head>
        <title>PAPA AIRBNB</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
    </Head>

    {validTodos.length === 0 ? (
      <div>loading...</div>
    ) : (
      validTodos.map((todo) => (
        <div key={todo.id}>
          <p>
            {todo.id}: {todo.title}
          </p>
        </div>
      ))
    )}
    </div>
  )
}

相关方法说明 #

• getStaticProps：告知Next.js组件在构建阶段填充props并生成静态HTML的方法。
• getServerSideProps：告知Next.js组件在每次请求时运行并填充props、生成HTML的服务端渲染方法。

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