React TypeScript报错：无法调用可能为undefined的对象

你遇到的这个报错源于TypeScript对可选属性的严格类型检查：你在子组件Props里把handleClick定义成了可选属性（带?），TypeScript会认为它可能为undefined，直接调用就会触发错误；而用any类型会跳过类型检查，所以不会报错。下面是几种实用的修复方案：

方案一：调用前检查函数是否存在 #

在子组件的handleRoleClick中先判断handleClick是否存在，再执行调用：

const handleRoleClick = () => {
  if (handleClick) {
    handleClick(false);
  }
};

方案二：使用可选链操作符简化判断 #

用?.操作符，只有当handleClick存在时才会执行调用：

const handleRoleClick = () => {
  handleClick?.(false);
};

方案三：给可选属性设置空函数默认值 #

在解构Props时给handleClick设置一个空函数作为默认值，确保它永远不会是undefined：

const AddRole = ({ handleClick = () => {} }: Props) => {
  const handleRoleClick = () => {
    handleClick(false);
  };
  // 其余组件代码不变
};

方案四：将属性设为必填（如果父组件一定会传） #

如果这个回调函数是子组件的必填依赖，直接去掉?将其设为必填属性，这样父组件不传的话TypeScript会提前报错，更严谨：

type Props = {
  handleClick: (val: boolean) => void; // 去掉?，标记为必填
};

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