为何TypeScript无法编译Props中解构的children属性？如何解决？

问题原因 #

1. 解构赋值语法误用
   你写的let {children: WithChildren} = props;是把props.children的值重命名给了WithChildren变量，而非给children做类型声明。这就导致后续代码里调用children时，该变量根本没被定义，直接触发TS2304错误。

2. 自定义类型未生效
   组件props用了any类型，既浪费了你定义的WithChildren类型，也让TypeScript失去了类型校验能力，没法提前发现解构逻辑的错误。

解决方法 #

1. 修正解构赋值逻辑

如果要通过解构获取children，正确写法是直接提取属性到同名变量：

const { children } = props;

如果确实需要重命名（比如避免变量名冲突），后续代码要使用重命名后的变量：

const { children: WithChildren } = props;
// 后续用 WithChildren 替代 children
return showSplashScreen ? <LayoutSplashScreen /> : <>{WithChildren}</>

2. 正确应用自定义类型

把组件props的类型从any替换成你定义的WithChildren，让TypeScript发挥类型校验作用：

import { ReactNode } from 'react';

type WithChildren = {
  children?: ReactNode
}

const AuthInit = (props: WithChildren) => {
  const { children } = props;
  // ...其他业务逻辑
  return showSplashScreen ? <LayoutSplashScreen /> : <>{children}</>
}

3. 简化写法（可选）

如果不需要单独解构children，直接使用props.children也是可行的（即你之前验证有效的写法）：

const AuthInit = (props: WithChildren) => {
  // ...其他业务逻辑
  return showSplashScreen ? <LayoutSplashScreen /> : <>{props.children}</>
}

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