如何用TypeScript强制React组件props.children必须携带key属性

问题根因 #

• React 元素的 key 是独立于组件 props 的特殊顶层属性，你直接继承 JSX.Element 扩展必填 key 的写法，TypeScript 无法将 JSX 语法中传入的 key 和你定义的接口字段做关联推断。哪怕显式写了 key，TS 还是会将元素推断为默认带可选 key（类型为 Key | null）的普通 JSX 元素，自然无法匹配你定义的 ElementWithKey 类型。
• 你直接将 children 定义为数组类型，没有兼容单个子元素场景，同时默认的 JSX 子元素推导逻辑不会触发逐个元素的类型收窄。

可行实现 #

通过 TypeScript 泛型 + 可变元组类型，可以实现你要的自动校验效果，无需使用者手动加类型断言：

PickyWrapper.tsx 完整代码 #

import type { ReactElement, Key } from 'react';

// 约束元素必须携带非空key
type EnsureKeyedElement<T extends ReactElement> = T extends { key: NonNullable<Key> } ? T : never;

// 用泛型逐个推导每个子元素的类型
interface PickyWrapperProps<T extends ReactElement[]> {
  children: [...{ [K in keyof T]: EnsureKeyedElement<T[K]> }];
}

export function PickyWrapper<T extends ReactElement[]>(props: PickyWrapperProps<T>) {
  // 如果需要运行时校验，可以放开这段逻辑
  // React.Children.forEach(props.children, child => {
  //   if ((child as ReactElement).key == null) {
  //     throw new Error('All direct children of PickyWrapper must have a non-empty key prop');
  //   }
  // })
  return <div>{props.children}</div>;
}

export default PickyWrapper;

校验效果 #

你给出的 App.tsx 代码会触发符合预期的校验：

export default function App() {
   return (
     <div className="App">
        <PickyWrapper>
           <div key="mykey">Example 1</div>   // 正常通过类型校验
           <div>Example 2</div>               // 抛出TS错误：类型不能分配给never
        </PickyWrapper>
     </div>
  );
 }

注意事项 #

• 不要用 React.FC 定义该组件，React.FC 自带的 children 类型为宽松的 ReactNode，会覆盖你自定义的严格约束。
• 上述实现默认仅做静态类型校验，如果需要运行时兜底，可以放开注释里的遍历校验逻辑。
• 支持传入单个或任意数量的子元素，只要是直接子元素都必须携带非空key。

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