Next.js中Fetch调用无法展示JSON数据，遇序列化错误求助

问题根源 #

• 解构字段不匹配：你调用的接口返回的是电影数组，根本没有test这个字段，所以const {test} = ...会得到undefined。Next.js要求getServerSideProps返回的props必须是可序列化的JSON，undefined不满足这个要求，直接触发报错。
• 直接渲染非基础类型：就算拿到了正确数据，在JSX里直接写{test}（如果是数组/对象），React没法直接渲染这种类型，还会出别的错。

修正后的完整代码 #

export async function getServerSideProps() {
  // 直接获取接口返回的电影数组，别解构不存在的test字段
  const movies = await fetch("https://gorestfulapi-production.up.railway.app/api/movies").then(res => res.json());
  
  return {
    props: {
      // 加个兜底，就算接口请求失败也返回空数组，避免undefined
      movies: movies || []
    }
  }
}

export default function Home({ movies }) {
  console.log('movies', movies);
  return (
    <div className="">
      <main className="">
        <h1 className="">
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>
        {/* 遍历电影数组，渲染每个电影的信息 */}
        <ul>
          {movies.map(movie => (
            <li key={movie.id}>
              <h3>{movie.title}</h3>
              <p>上映年份：{movie.year}</p>
            </li>
          ))}
        </ul>
      </main>
    </div>
  )
}

核心修改点 #

• 取消错误解构：接口返回的是电影列表数组，直接赋值给movies变量，不要硬套不存在的test字段。
• 增加兜底逻辑：用movies || []保证传递给组件的永远是数组，彻底避免undefined导致的序列化错误。
• 正确渲染数据：用map遍历数组，把每个电影数据转换成React能识别的元素，而不是直接扔个对象/数组到JSX里。

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