如何限制props.children.some方法仅检测image类型的React子元素？

报错原因 #

React.ReactNode 类型的定义包含 string、number、boolean、null、undefined、ReactFragment、ReactPortal 等多种类型，这些类型都不存在 type 属性，直接访问 child.type 自然会触发TypeScript类型报错。

修复方案 #

使用React官方提供的React.isValidElement()内置类型守卫做类型收窄，该方法会判断传入值是否为合法的React元素，通过校验后TypeScript会自动将child的类型收窄为React.ReactElement，此时就可以正常访问type属性。

修改后的代码如下：

props.children.some(
  (child) => React.isValidElement(child) && child.type.name === "image"
)

如果需要兼容更多children格式（比如单个节点、嵌套片段、布尔值节点等场景），可以使用React.Children.toArray统一处理后再做判断，兼容性更强：

React.Children.toArray(props.children).some(
  (child) => React.isValidElement(child) && child.type.name === "image"
)

可选进阶：自定义类型守卫 #

如果需要更严格的类型校验（比如确认type上存在name属性），可以自定义类型守卫：

function isImageElement(child: React.ReactNode): child is React.ReactElement {
  return React.isValidElement(child) 
    && typeof child.type === 'function' 
    && 'name' in child.type 
    && child.type.name === "image"
}

// 调用逻辑
props.children.some(isImageElement)

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