Next.js+TypeScript中含props.children的接口定义与报错解决

错误根源 #

你遇到的类型不匹配问题和props.children无关，完全是因为错误地把pageTitle的类型定义成了字符串字面量'string'，而不是全局的string类型。字面量类型'string'只能接受值为'string'的字符串，传入'Home'自然会触发类型错误。

正确的接口定义方式 #

要同时包含children和自定义属性的组件接口，只需要在接口中明确声明children的类型为React.ReactNode，再加上其他属性即可：

import React from 'react';

// 正确的AuxProps接口定义
interface AuxProps {
  children: React.ReactNode;
  pageTitle: string; // 这里用全局string类型，不是字面量'string'
}

// 布局组件示例
const Layout: React.FC<AuxProps> = ({ children, pageTitle }) => {
  return (
    <div>
      <header>{pageTitle}</header>
      <main>{children}</main>
    </div>
  );
};

// 使用组件时的正确写法
const HomePage = () => {
  return <Layout pageTitle="Home">首页内容</Layout>;
};

进阶：限制pageTitle为指定值 #

如果需要pageTitle只能是几个固定的页面标题（比如路由页面的标题），可以用联合字面量类型来约束，这样能避免传入非法值：

interface AuxProps {
  children: React.ReactNode;
  pageTitle: 'Home' | 'About' | 'Contact'; // 只允许这三个值
}

// 合法使用
<Layout pageTitle="Home">...</Layout>

// 非法使用（TypeScript会报错）
<Layout pageTitle="Invalid">...</Layout>

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