Next.js集成TMDB API遇map读取undefined错误求助

核心问题定位 #

你的代码存在两处关键问题：一是getStaticProps函数中已成功获取电影数据，但返回组件props时硬编码传递了空数组，未传递实际获取到的数据；二是未对movies参数添加防御性处理，若数据获取环节出现异常，会导致movies变为undefined，触发map操作报错。

修复步骤 #

1. 修正getStaticProps的props返回逻辑
   将getStaticProps中的返回代码修改为传递实际获取的电影数据：

   export async function getStaticProps() {
     const movies = await fetchMovies();
     return {
       props: {
         movies, // 直接传递获取到的movies变量
       }
     }
   }
   

2. 添加防御性代码避免undefined报错
   给组件的movies props设置默认空数组，同时在map前使用可选链操作符，确保即使movies为undefined也不会触发错误：

   export default function MoviesDisplayList({movies = []}) {
     return (
         <>
           <div>
             <h1>TMDB movies</h1>
             <ul>
               {movies?.map((movie) => (
                 <li key={movie.id}>{movie.title}</li>
               ))}
             </ul>
           </div>
         </>
     );
   }
   

3. 验证环境变量是否正确加载
   确保项目根目录下的.env文件中变量名正确（格式为TMDB_API_KEY=你的密钥），且未添加多余引号。可在tmdb.js中临时添加日志验证：

   const TMDB_API_KEY = process.env.TMDB_API_KEY
   console.log(TMDB_API_KEY); // 启动项目后查看控制台是否输出正确的API密钥
   

修复后的完整moviesdisplaylist.jsx代码 #

import './moviesdisplaylist.css'
import {fetchMovies} from '../../../../api/tmdb';

export default function MoviesDisplayList({movies = []}) {
  return (
      <>
        <div>
          <h1>TMDB movies</h1>
          <ul>
            {movies?.map((movie) => (
              <li key={movie.id}>{movie.title}</li>
            ))}
          </ul>
        </div>
      </>
  );
}

export async function getStaticProps() {
  const movies = await fetchMovies();
  return {
    props: {
      movies,
    }
  }
}

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