为React组件添加命名空间子组件时报FC类型不存在对应属性如何解决

你给组件声明的类型React.FC<Props>是React提供的标准函数组件类型，该类型本身没有定义Head、Body这类自定义静态属性，所以你后续为组件挂载子组件时，TypeScript无法识别额外新增的属性，就会抛出对应错误。

有两种常用的实现方式可以解决类型不匹配问题，无需修改tsconfig基础配置：

方案1：显式定义复合组件类型 #

先声明包含基础组件属性和子组件静态属性的联合类型，再用该类型声明你的组件：

import {Head} from "./head/head";
import {Body} from "./body/body";

interface Props {
  id: string
}

// 定义复合组件的完整类型：基础FC类型 + 自定义静态属性
type CompoundComponent = React.FC<Props> & {
  Head: typeof Head;
  Body: typeof Body;
}

const Component: CompoundComponent = ({id}) => {
  return <span>Hello World</span>
};

Component.Head = Head;
Component.Body = Body;

方案2：用Object.assign合并实现与静态属性 #

使用Object.assign直接合并基础组件和静态子组件，TypeScript会自动推导完整类型，无需手动声明额外类型：

import {Head} from "./head/head";
import {Body} from "./body/body";

interface Props {
  id: string
}

const Component = Object.assign(
  ({id}: Props) => <span>Hello World</span>,
  { Head, Body }
)

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