Vercel部署Next.js项目出现TypeError读取'list'未定义问题求助

问题根源 #

本地运行正常但Vercel预渲染报错，核心原因是预渲染阶段（SSG/SSR）的数据获取逻辑与本地开发存在差异：

• 本地开发时，数据可能在客户端动态加载，不会触发预渲染校验；但Vercel部署时会执行静态预渲染，若movie.js直接访问未初始化的list属性（比如数据未返回、父组件未正确传递props），就会抛出Cannot read properties of undefined (reading 'list')错误。
• 另一种可能是movies.js在预渲染阶段未获取到数据，导致传递给movie.js的props为undefined，子组件直接访问xxx.list触发报错。

代码改进方案 #

1. 子组件添加数据兜底校验 #

在movie.js中，先校验数据是否存在，添加默认值避免报错：

// movie.js
export default function Movie({ moviesData }) {
  // 可选链+默认值，防止数据未定义时崩溃
  const movieList = moviesData?.list || [];

  return (
    <div className="movie-list">
      {movieList.map(movie => (
        <div key={movie.id} className="movie-item">
          <h3>{movie.title}</h3>
        </div>
      ))}
    </div>
  );
}

2. 页面级组件统一预渲染数据获取 #

Next.js的预渲染逻辑需要在pages目录的页面组件中执行，不要在components目录组件中单独处理路由或数据。在页面级文件中用getStaticProps（SSG）或getServerSideProps（SSR）获取数据，再传递给子组件：

// pages/movies.js（路由入口页面，不是components目录下的文件）
import Movie from '../components/movie';
import { fetchMovies } from '../components/search';

// 预渲染阶段获取数据，确保传递给子组件时数据已存在
export async function getStaticProps() {
  let moviesData;
  try {
    moviesData = await fetchMovies();
  } catch (err) {
    console.error('数据获取失败:', err);
    moviesData = { list: [] };
  }
  return {
    props: { moviesData }
  };
}

export default function MoviesPage({ moviesData }) {
  return <Movie moviesData={moviesData} />;
}

3. API调用添加错误捕获与兜底 #

在search.js中处理API请求的异常，确保返回结构始终包含list字段：

// search.js
export async function fetchMovies() {
  try {
    const res = await fetch('你的API接口地址');
    if (!res.ok) throw new Error(`HTTP错误: ${res.status}`);
    const data = await res.json();
    // 确保返回数据结构合规
    return data?.list ? data : { list: [] };
  } catch (err) {
    console.error('API请求失败:', err);
    // 出错时返回空列表，避免传递undefined
    return { list: [] };
  }
}

4. 修正路由组件存放位置 #

Next.js的路由由pages目录下的文件决定，报错中的/components/movie说明你可能误将components目录下的组件作为路由页面。需将路由页面移到pages目录，components目录仅存放复用型组件。

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