Next.js 14 App Router下如何无需传参调用静态组件？

错误原因分析 #

• 你误用了Pages Router的getStaticProps，但App Router不支持在组件层级使用该函数，它仅在Pages Router的页面中生效。
• 组件直接返回data对象，React无法渲染纯对象，必须返回合法的React元素。
• 类型推断错误：使用InferGetServerSidePropsType但实际对应getStaticProps，类型不匹配导致TS报错。

解决方案 #

在App Router中，组件可直接在内部完成静态数据获取（默认fetch会缓存静态数据），无需通过页面传参，调整后的代码如下：

修改后的组件代码（Personalities.tsx） #

type PersonalitiesProps = {
  id: string;
  name: string;
  historia: string;
};

const Personalities = async () => {
  // App Router中组件支持直接异步fetch，默认cache: 'force-cache'即静态获取
  const res = await fetch('http://localhost:8000/api/v1/personalidades', {
    method: 'GET',
    // 显式指定静态缓存，可选，默认值即为force-cache
    cache: 'force-cache',
  });

  // 处理请求异常
  if (!res.ok) {
    throw new Error('获取人物数据失败');
  }

  const data: PersonalitiesProps = await res.json();

  // 渲染合法的React元素，替换直接返回对象的写法
  return (
    <div className="personalities-card">
      <h3>{data.name}</h3>
      <p>ID：{data.id}</p>
      <p>{data.historia}</p>
    </div>
  );
};

export default Personalities;

调用页面代码（app/page.tsx） #

import Personalities from '@/components/Personalities';

export default function Home() {
  return (
    <section>
      <h1>Hello, World!</h1>
      {/* 无需传参，直接调用组件 */}
      <Personalities />
    </section>
  );
}

关键修改说明 #

• 移除getStaticProps：App Router支持异步组件内部直接fetch数据，默认会静态缓存结果，满足静态组件需求。
• 组件改为异步函数：App Router允许组件为async函数，直接在内部处理数据获取逻辑。
• 渲染合法React元素：将data对象转换为具体的JSX结构，避免"Objects are not valid as a React child"错误。
• 类型修正：直接为fetch返回数据指定类型，无需依赖Pages Router的类型工具。

额外提示 #

• 若需定期刷新静态数据，可在fetch中添加next: { revalidate: 86400 }参数设置缓存有效期（单位：秒）。
• 确保API返回结构与PersonalitiesProps类型完全匹配，避免类型校验报错。

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