TS2339报错：访问React.ReactElement数组type属性提示类型不存在

报错原因 #

你定义的children参数类型是(React.ReactChild | React.ReactElement)[]，而React.ReactChild的类型本身就包含了string、number两种基础类型，这两类值是不存在type属性的。TypeScript做静态校验的时候，会按联合类型里所有可能的类型做校验，自然就会抛出类型不匹配的错误。

解决方案 #

根据你的实际业务场景，可以选以下两种方案：

• 如果你能100%确定传入的children里所有元素都是React.ReactElement，不存在文本、数字这类原生节点，直接修改参数的类型定义即可：

const getChildren = (
    children: React.ReactElement[]
) => {
    console.log(children[0].type)  // 不会报错
}

• 如果你没法保证传入的children没有非ReactElement类型的节点，优先用类型守卫做判断，不要直接用as强转：

const getChildren = (
    children: (React.ReactChild | React.ReactElement)[]
) => {
    if (React.isValidElement(children[0])) {
        // 进入这个判断分支后，TS会自动将children[0]的类型收窄为React.ReactElement
        console.log(children[0].type)  // 不会报错
    }
}

注意：尽量不要直接用as做强制类型转换，这种写法只是绕过了TS的静态校验，如果运行时真的出现字符串、数字类型的子元素，访问type属性会直接抛出运行时错误，而类型守卫的写法可以同时兼容静态校验和运行时安全。

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