复刻电影流媒体网站时遇TypeError: Cannot read properties of undefined (reading 'ppr')错误

我在复刻知名电影流媒体网站时，页面生成阶段出现服务器错误：
TypeError: Cannot read properties of undefined (reading 'ppr')
错误日志显示在终端，预期网站正常运行但出现该问题。

相关代码 #

HomeContainer 组件

import React from 'react'

import Movies from "@/mocks/movies.json";
import Genres from "@/mocks/genres.json";

import FeauturedMovie from '@/components/feautured-movie';
import Categories from '@/components/categories';

function HomeContainer() {
  return (
    <div>
      <FeauturedMovie movie={Movies.results[0]}/>
      <Categories categories={Genres.genres.slice(0,5)}/>
    </div>
  )
}

export default HomeContainer

FeaturedMovie 组件

import React from "react";
import Link from "next/link";
import Image from "next/image";
import { FaPlus } from "react-icons/fa";

import styles from "./styles.module.css";

function FeaturedMovie({ movie = {}, isCompact = true }) {
  const { poster_path, title, overview } = movie;

  return (
    <div className={styles.movieWrapper}>
      <h1 className={styles.movieTitle}>{title}</h1>
      <p
        className={`${styles.overview} ${
          isCompact ? styles.shortOverview : ""
        }`}
      >
        {overview}
      </p>
      <div className={styles.actionButtons}>
        <Link className={styles.playButton} href={`/movie/${movie.id}`}>
          Play
        </Link>
        <button className={styles.addButton}>
          <FaPlus />
        </button>
      </div>
      <div className={styles.moviePoster}>
        <div className={styles.moviePosterOverlay}></div>
        <Image
          unoptimized
          src={`https://image.tmdb.org/t/p/original${poster_path}`}
          alt={title}
          fill
        />
      </div>
    </div>
  );
}


export { FeaturedMovie };

Categories 组件

import React from "react";
import Link from "next/link";

import styles from "./styles.module.css";

function Categories({ categories }) {
  return (
    <div className={styles.categories}>
      {categories.map((category) => (
        <Link
          key={category.id}
          className={styles.category}
          href={`/${category.id}`}
        >
          <div className={styles.name}>{category.name}</div>
        </Link>
      ))}
    </div>
  );
}

export { Categories };

问题原因与解决方案 #

1. 组件导入拼写错误（核心问题）

HomeContainer中导入的组件名FeauturedMovie与实际组件名FeaturedMovie拼写不符，同时组件文件路径@/components/feautured-movie的文件名也拼写错误，导致组件无法正确导入，触发Next.js预渲染阶段的ppr相关错误。
修复方式：

• 将HomeContainer中的导入语句改为：

  import { FeaturedMovie } from '@/components/featured-movie';
  

• 确保组件文件名为featured-movie.jsx（对应正确拼写），同时因为组件是命名导出（export { FeaturedMovie }），所以需要用解构导入，而非默认导入。

2. Mock数据结构验证

• 检查movies.json是否包含非空的results数组，确保Movies.results[0]能获取到有效电影对象；
• 检查genres.json是否包含非空的genres数组，确保Genres.genres.slice(0,5)能返回至少5个分类项。

3. 增强组件容错性（可选）

• 在FeaturedMovie组件中，解构时添加空值保护，避免movie为undefined时出错：

  const { poster_path, title, overview, id } = movie || {};
  

• 在Categories组件中，使用可选链判断后再遍历数组：

  {categories?.map((category) => (...))}
  

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