仅接受文本与falsy值的React组件，其children类型应如何定义？

最优类型定义 #

React 内置的React.ReactText已经覆盖了string | number两种可直接转为文本的基础类型，再结合允许的 falsy 类型和嵌套数组支持，你可以定义一个可复用的类型：

type TextOnlyChildren = 
  | React.ReactText 
  | boolean 
  | null 
  | undefined 
  | TextOnlyChildren[];

interface MyTextOnlyComponentProps {
  children: TextOnlyChildren;
  // 其他组件入参定义
}

类型说明 #

• 完全适配你给出的组件用法：普通字面量文本、字符串表达式、短路运算返回的布尔值都可以正常通过类型校验
• 自动禁止传入JSX元素、普通对象等非允许类型，只要传入就会触发TS编译报错，满足你的类型限制要求
• 递归类型的写法天然支持单层/多层嵌套的子元素结构，配合你已有的React.Children.map处理逻辑可以正常拍平内容

可选运行时校验补充 #

如果需要兼容JS场景的运行时防错，可以在原有内容处理逻辑里加一层校验，避免非法类型传入：

const content = React.Children.map(
  children,
  (child) => {
    // 运行时拦截对象/JSX元素类型
    if (typeof child === 'object' && child !== null) {
      throw new Error('MyTextOnlyComponent 仅允许传入文本和falsy值作为子元素');
    }
    return child && `${child}`
  }
)
.filter(Boolean)
.join("");

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