类型错误：类型'OmitWithTag<EventsPageProps, keyof PageProps, "default">'不满足约束'{[x：string]：never; }'

Question

这是我的代码：

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;

但是每次构建 nextjs 项目时，我都会收到此错误消息：

类型错误：类型“OmitWithTag”不满足约束 '{ [x：字符串]：从不； }'.

上面的文件是我的事件组件的page.tsx文件。

我不知道该怎么做，因为这是我的 about 组件的 page.tsx 的代码，它完全没问题：

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;

我不明白为什么对方会提出问题。

Answer 1

Typescript 足够智能，可以推断某物是否是 React 组件，因此不再需要将组件键入为

React.FC

。

至于传递 props 类型，您应该能够将错误的组件重构为这样，并且应该很高兴：

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

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