React+TypeScript中如何定义支持缺省子元素的children类型？

要让组件的children能接受单个React元素，或者两个元素（第二个可为null），核心是覆盖两种场景：只传一个子元素时children是单个对象，传两个（含条件渲染的null）时是数组。

方案1：用类型别名简化联合类型 #

先定义一个通用的「单个或成对元素」类型，避免重复书写：

import { ReactElement } from 'react';

// 通用类型：单个T，或[T, T|null]的元组
type SingleOrPair<T> = T | [T, T | null];

// 组件Props
interface MyComponentProps {
  children: SingleOrPair<ReactElement>;
}

function MyComponent({ children }: MyComponentProps) {
  // 统一处理为[第一个元素, 第二个元素|null]的格式
  const [first, second] = Array.isArray(children) ? children : [children, null];
  
  return (
    <div className="container">
      {first}
      {second}
    </div>
  );
}

方案2：利用函数重载（更明确的类型分支） #

如果需要更清晰的类型分支，可以用重载定义组件：

import { ReactElement } from 'react';

// 定义两种Props类型
type SingleChildProps = { children: ReactElement };
type PairChildProps = { children: [ReactElement, ReactElement | null] };

// 重载组件签名
function MyComponent(props: SingleChildProps): JSX.Element;
function MyComponent(props: PairChildProps): JSX.Element;

// 组件实现
function MyComponent(props: SingleChildProps | PairChildProps) {
  const [first, second] = Array.isArray(props.children) 
    ? props.children 
    : [props.children, null];
  
  return (
    <div>
      {first}
      {second}
    </div>
  );
}

为什么之前的尝试无效？ #

• never：表示不可能存在的类型，完全不符合子元素的实际情况；
• unknown：是任意类型的父类型，无法限制子元素必须是React元素，失去了TypeScript的类型校验意义；
• 仅用元组[ReactElement, ReactElement|null]：只覆盖了传两个子元素（含null）的场景，没处理只传一个子元素时children是单个对象的情况，所以ExampleUseTwo会报错。

验证使用场景 #

两种方案都能支持你的需求：

// 条件渲染第二个子元素（数组场景）
const ExampleUseOne = () => (
  <MyComponent>
    <div>First Child</div>
    {Math.random() > 0.5 ? <div>Second Child</div> : null}
  </MyComponent>
);

// 只传一个子元素（单个对象场景）
const ExampleUseTwo = () => (
  <MyComponent>
    <div>Only Child</div>
  </MyComponent>
);

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