React命名空间组件报Parent.Child无构造/调用签名ts(2604)错误如何解决

报错根因 #

你在ParentComponent类型定义中为Child属性添加了?可选修饰符，TypeScript无法保证你后续一定会为该属性赋值，会将Parent.Child识别为React.FC<MyButtonProps> | undefined联合类型，undefined无法作为JSX元素构造使用，因此抛出ts(2604)错误。
另外你给出的MyButtonProps类型定义存在语法问题，漏了类型赋值的等于号，也可能引发额外的类型报错。

解决方案 #

方案1：移除可选修饰符，用Object.assign合并静态属性（推荐） #

这种方式可以让TypeScript自动完成类型推断和校验，不需要额外的断言操作，是实现命名空间组件的标准写法：

import React from 'react'

// 修正类型定义语法
type MyButtonProps = {
  face?: string
}
const MyButton: React.FC<MyButtonProps> = (props) => {
  return <button>{props.children}</button>
}

type ParentProps = {
  color: string
}
// 这里Child不要加可选修饰符
type ParentComponent = React.FC<ParentProps> & {
  Child: React.FC<MyButtonProps>
}

// 用Object.assign合并组件本体与静态属性
const Parent: ParentComponent = Object.assign(
  (props: ParentProps) => {
    return <div style={{color: props.color}}>{props.children}</div>
  },
  { Child: MyButton }
)

// 正常使用不会报错
const App = () => {
  return (
    <Parent color="red">
      <Parent.Child face="lol">Hello World!</Parent.Child>
    </Parent>
  )
}

方案2：保留可选属性，使用时添加断言 #

如果你的业务场景确实需要Child为可选属性，可以在使用时通过非空断言告诉TypeScript该属性一定存在：

<Parent>
  <Parent.Child! face="lol">Hello World!</Parent.Child!>
</Parent>

也可以提前做类型守卫，避免运行时报错：

const App = () => {
  const Child = Parent.Child
  return (
    <Parent color="red">
      {Child && <Child face="lol">Hello World!</Child>}
    </Parent>
  )
}

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