TypeScript+React 自定义组件ReactElement类型转换与传参报错解决

你遇到的TS类型报错、运行时transparent属性始终为undefined的问题，核心是类型断言匹配错了React的核心类型定义：

• React 函数组件的本质是「接收对应props、返回React渲染元素的函数」。你之前给HeaderRight做的断言是() => ReactElement<ImageButtonProps>，这个类型的语义是「不需要传入任何参数的无参函数，调用后直接返回带ImageButtonProps类型的元素」，完全不是一个可接收props的React组件。
• TS识别到这个无参函数类型的组件时，会默认它的入参是空的IntrinsicAttributes，自然会抛出「类型上不存在transparent属性」的TS2322错误；同时类型定义的错位也会导致编译环节对props传递逻辑的异常处理，最终运行时组件拿到的transparent值始终是undefined。

这里要区分两个容易混淆的React内置类型，也是踩坑的核心：

• ReactElement：是JSX代码运行后实际生成的元素对象，也就是你写<ImageButton />最后得到的那个结构，不是组件本身
• ComponentType<Props>：是标准的React组件类型，定义了组件接收的props结构、返回值类型，和函数组件、类组件的类型是完全兼容的

把原来的错误类型断言替换为组件对应的类型定义即可，不需要改动其他业务逻辑：

import type { ComponentType, TouchableOpacityProps } from 'react';
// 原有ImageButtonProps定义保持不变
export interface ImageButtonProps extends TouchableOpacityProps {
  transparent?: boolean;
}

export default function Header(props: StackHeaderProps) {
   const options = props.scene.descriptor.options;
   // 正确断言：将headerRight挂载的组件，标记为接收ImageButtonProps的React组件
   const HeaderRight = options.headerRight as ComponentType<ImageButtonProps>;
   // 传入transparent时，TS会正常校验属性合法性，运行时也能被组件正确接收
   return (<HeaderRight transparent={true}/>);
}

• 因为你已经明确当前业务场景下，options.headerRight对应的组件一定是ImageButton，不需要兼容其他类型的右侧头部组件，所以这里直接做类型断言是完全合理的，不会引入额外的类型安全问题。
• 替换为ComponentType<ImageButtonProps>后，TS会自动读取ImageButtonProps里的属性定义，transparent作为接口里定义的可选属性，传入时既不会触发类型报错，也不会出现运行时值为undefined的问题，两个故障点会同时解决。

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