Next.js构建报错：OmitWithTag类型不满足{ [x: string]: never; }约束

问题描述 #

在Next.js项目的app/events/page.tsx（或pages/events.tsx）中编写如下代码时，构建会报错：

import EventsContainer from "@/components/events/events-container/EventsContainer"; // Main container component

interface EventProps {
  events: any[];
  pastEvents: any[];
}

const EventsPage: React.FC<EventProps> = ({ events, pastEvents }) => {
  return (
    <div className="max-w-7xl mx-auto bg-background text-foreground shadow-md rounded-lg p-6">
      <EventsContainer events={events} pastEvents={pastEvents} />
    </div>
  );
};

export default EventsPage;

错误信息：

Type error: Type 'OmitWithTag<EventProps, keyof PageProps, "default">' does not satisfy the constraint '{ [x: string]: never; }'

而结构类似的About页面（无自定义props）运行正常：

import AboutContainer from "@/components/about/about-container/AboutContainer";

const AboutPage: React.FC = () => {
  return (
    <div className="max-w-7xl mx-auto bg-background text-foreground shadow-md rounded-lg p-6">
      <AboutContainer />
    </div>
  );
};

export default AboutPage;

原因分析 #

这个错误是因为Next.js页面组件的props规则导致的类型冲突：

• 若使用App Router（app/目录下的page.tsx）：页面组件默认不能直接接收自定义props，必须通过服务器组件内部获取数据后传递给子组件，直接定义带自定义props的React.FC<EventProps>会违反类型约束。
• 若使用Page Router（pages/目录下的文件）：页面组件的自定义props必须通过getStaticProps或getServerSideProps传递，否则TypeScript会识别到props来源不合法，抛出类型错误。

About页面没有自定义props，符合Next.js页面组件的默认类型约束，因此运行正常。

解决方法 #

根据你使用的路由方案选择对应修复方式：

方案1：App Router（app/events/page.tsx） #

将页面改为服务器组件，内部获取数据后传递给EventsContainer：

import EventsContainer from "@/components/events/events-container/EventsContainer";

// 替换为实际的数据获取逻辑（API请求、数据库查询等）
async function fetchEventsData() {
  const res = await fetch("https://your-api-endpoint/events", { cache: "force-cache" });
  if (!res.ok) throw new Error("Failed to fetch events");
  return res.json();
}

// 服务器组件无需React.FC类型声明
export default async function EventsPage() {
  const { events, pastEvents } = await fetchEventsData();
  
  return (
    <div className="max-w-7xl mx-auto bg-background text-foreground shadow-md rounded-lg p-6">
      <EventsContainer events={events} pastEvents={pastEvents} />
    </div>
  );
}

方案2：Page Router（pages/events.tsx） #

通过getStaticProps或getServerSideProps传递自定义props，并完善类型声明：

import EventsContainer from "@/components/events/events-container/EventsContainer";
import { GetStaticProps, NextPage } from "next";

interface EventProps {
  events: any[];
  pastEvents: any[];
}

// 使用NextPage类型替代React.FC，更贴合Next.js Page Router的类型约束
const EventsPage: NextPage<EventProps> = ({ events, pastEvents }) => {
  return (
    <div className="max-w-7xl mx-auto bg-background text-foreground shadow-md rounded-lg p-6">
      <EventsContainer events={events} pastEvents={pastEvents} />
    </div>
  );
};

// 通过getStaticProps获取数据并传递props（静态生成）
export const getStaticProps: GetStaticProps<EventProps> = async () => {
  const res = await fetch("https://your-api-endpoint/events");
  if (!res.ok) throw new Error("Failed to fetch events");
  const { events, pastEvents } = await res.json();

  return {
    props: { events, pastEvents },
    // 可选：设置重新验证时间（ISR）
    revalidate: 86400,
  };
};

export default EventsPage;

额外优化建议 #

• 避免使用any类型，为events和pastEvents定义具体的接口类型，提升代码健壮性。
• 如果EventsContainer是客户端组件（使用'use client'指令），确保服务器组件传递的props类型与客户端组件接收的类型一致。

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