React TypeScript 向子组件传递state后访问state.name报错如何解决

核心问题1：子组件Props类型定义错误 #

你在子组件中给state属性定义的类型是ReactNode，该类型是React所有可渲染内容的联合类型（包含字符串、数字、JSX、null、undefined等），不包含你自定义的Information接口的name、age属性，因此TypeScript在静态检查阶段会判定你访问state.name属于非法操作，直接报错。

核心问题2：父组件state存在null类型分支 #

你在父组件定义state时，标注的类型是Information | null，哪怕子组件类型定义正确，直接访问state.name也会触发类型报错，因为null类型不存在name属性。

修复步骤 #

步骤1：修正子组件Props类型 #

首先从父组件导入你定义的Information接口，将子组件state属性的类型和父组件对齐：

// 子组件顶部导入类型
import type { Information } from './App'

// 修正Props定义
type Props = {
  state: Information | null;
};

步骤2：访问属性前增加非空判断 #

可以用TypeScript的可选链操作符?.处理null的情况，也可以加兜底逻辑：

const MyForm: FC<Props> = ({ state }: Props) => {
  // 可选链避免null访问报错
  console.log(state?.name);
  // 渲染时可以用空值合并运算符加兜底展示
  return <div>Hello, {state?.name ?? '访客'}</div>;
};

可选优化（如果确定state永远不会为null） #

如果你业务逻辑里state永远不会被设为null，可以直接把父组件state的类型里的| null去掉，就不需要额外处理非空逻辑了：

// 父组件useState修改
const [state, setState] = useState<Information>({
  name: "young",
  age: "10",
});

// 子组件Props就可以直接定义为
type Props = {
  state: Information;
};

为什么console.log(state)可以正常输出？
因为console.log本身接受任意类型的参数，不会触发类型校验，而TypeScript的静态检查是在编译阶段执行的，哪怕运行时state确实有name属性，只要类型定义不匹配就会提前报错。

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