React TypeScript组件间传递接口Props构建报错求助

问题根源 #

这个错误出在Next.js页面组件的Props类型约束上：Next.js对页面组件的Props有严格的类型校验，当你直接将自定义的ModelProps作为页面组件的Props时，Next.js的类型系统会自动用OmitWithTag处理内置PageProps（如params、searchParams）和自定义Props的冲突，导致像modalOpen这类boolean类型的属性无法匹配约束要求的never类型。

修复方案 #

1. 合并页面Props类型 #

不要让页面组件直接接收ModelProps，而是将其与Next.js的PageProps合并，确保类型兼容：

import { PageProps } from 'next';

// 你的自定义Props接口
interface ModelProps {
  modalOpen: boolean;
  // 其他自定义属性...
}

// 合并Next.js内置Props和自定义Props
type HomePageProps = PageProps & ModelProps;

export default function Home(props: HomePageProps) {
  return <BookingModalPopup modalOpen={props.modalOpen} />;
}

2. 将交互状态移到组件内部管理 #

如果modalOpen是组件的交互状态（不是从数据获取方法传入的），完全不需要把它放在页面组件的Props里，直接在页面内部用useState维护：

import { useState } from 'react';
import BookingModalPopup from '../components/BookingModalPopup';

export default function Home() {
  const [modalOpen, setModalOpen] = useState(false);

  return (
    <>
      <button onClick={() => setModalOpen(true)}>打开弹窗</button>
      <BookingModalPopup modalOpen={modalOpen} onClose={() => setModalOpen(false)} />
    </>
  );
}

这是最符合React状态管理逻辑的方式，从根源避免了类型冲突。

3. 对齐数据获取方法的返回类型 #

如果页面使用了getStaticProps或getServerSideProps，确保返回的Props类型和页面组件的Props完全匹配，不要混入交互类属性：

// 数据获取方法
export async function getStaticProps() {
  return {
    props: {
      pageData: '从服务端获取的数据',
    },
  };
}

// 页面Props = 数据Props + 可选自定义Props（如果需要）
type HomePageProps = Awaited<ReturnType<typeof getStaticProps>>['props'] & {
  modalOpen?: boolean;
};

export default function Home(props: HomePageProps) {
  return <BookingModalPopup modalOpen={props.modalOpen ?? false} />;
}

4. 临时绕过类型检查（不推荐） #

如果以上方案都无法快速落地，可以用类型断言临时解决，但会失去类型安全，不建议长期使用：

export default function Home(props: ModelProps) {
  return <BookingModalPopup modalOpen={(props as unknown as { modalOpen: boolean }).modalOpen} />;
}

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