NextJS 13页面默认导出类型错误：Products类型无效求助

错误原因 #

Next.js 13 App Router 规定，page.tsx 的默认导出组件不允许接收自定义的 props 类型（比如你定义的 Products）。App Router 的页面组件 props 仅支持框架内置的类型（如 Params、SearchParams），或者通过 generateStaticParams 生成的路由参数，无法直接传入自定义的业务数据 props。

你之前的写法延续了 Pages Router 的思路（通过 getStaticProps 传递数据给页面组件），但 App Router 的数据获取逻辑完全不同，页面组件不会接收你定义的 products 参数，因此 TypeScript 校验会报错。

解决方案 #

把数据获取逻辑移到页面组件内部，移除自定义的 props 类型定义：

修改后的 page.tsx 示例 #

import { Product } from '../components/product-tile';
import ProductTile from '../components/product-tile';

// 保留Products类型用于数据结构校验
interface Products {
  products: Product[];
}

export default function ShopPage() {
  // 方式1：直接导入本地JSON文件（App Router支持）
  const productsData: Products = require('../data/products.json');
  // 或ES模块语法：
  // import productsData from '../data/products.json' assert { type: 'json' };

  // 方式2：通过fetch获取（Server Component可直接使用，无需额外配置）
  // const res = await fetch('./products.json');
  // const productsData: Products = await res.json();

  return (
    <div className="shop-container">
      {productsData.products.map(product => (
        <ProductTile key={product.id} product={product} />
      ))}
    </div>
  );
}

关键说明 #

1. App Router 默认页面组件是 Server Component，可直接在组件内部执行数据读取（本地文件、API 请求等），无需额外配置。
2. 无需再给页面组件传递自定义 props，数据直接在组件内部获取并使用即可。
3. 保留 Products 类型用于校验 JSON 数据的结构，确保类型安全。

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