React组件返回字符串时，TypeScript中正确的组件类型是什么？

安全阿岳

2026-7-26

解决方案

React 组件的合法返回类型包含字符串（属于React.ReactNode的子集），但React.FC的默认类型定义将返回值限制为JSX.Element | null，这就是你遇到报错的原因。以下是几种符合需求的类型定义方式：

1. 用`ComponentType`结合`ReactNode`定义

ComponentType能正确识别 props 类型，同时指定返回类型为React.ReactNode，既保留组件的类型特性，又允许返回字符串：

import type { ComponentType, ReactNode } from 'react';

// 定义你的组件props类型
type MyComponentProps = {};

const MyComponent: ComponentType<MyComponentProps> = (): ReactNode => {
  return "hello world";
};

2. 手动声明组件函数类型（更灵活）

直接定义 props 和返回类型，这种方式天然支持 props 和 ref 的类型识别，无需依赖React.FC：

import type { ReactNode, Ref } from 'react';

// 示例：包含ref的props类型定义
type MyComponentProps = {
  ref?: Ref<HTMLDivElement>;
};

function MyComponent(props: MyComponentProps): ReactNode {
  return "hello world";
}

// 如果需要forwardRef，类型定义如下（注意：字符串无法绑定ref，需返回DOM元素）
const MyComponentWithRef = React.forwardRef<HTMLDivElement, MyComponentProps>((props, ref) => {
  return <div ref={ref}>hello world</div>;
});

3. 扩展`React.FC`返回类型（不推荐）

若一定要用React.FC，可以通过类型扩展覆盖默认返回限制，但这种方式侵入性强，不建议在大型项目中使用：

import type { FC } from 'react';

type MyFC<P = {}> = FC<P> & {
  (props: P): React.ReactNode;
};

const MyComponent: MyFC = () => {
  return "hello world";
};