React TypeScript组件可选onClick回调触发‘可能为undefined’报错求助

我明白你遇到的这个问题——虽然你已经在JSX的三元表达式里判断了optionalClickFn是否存在，但TypeScript仍然抛出这个错误，这其实是因为TypeScript的类型追踪无法跨上下文确认变量的可用性。

具体来说，你在三元判断时确认了props.optionalClickFn存在，但当进入onClick的箭头函数时，这个函数是在组件渲染完成后才会被调用的，TypeScript无法保证到那个时候props.optionalClickFn仍然是存在的（虽然实际开发中这种情况很少见，但TypeScript的严格类型检查会考虑这种可能性）。

下面是几个可行的解决方案：

方案1：使用可选链操作符（推荐） #

直接在调用函数时使用?.操作符，它会自动判断函数是否存在，存在才执行：

const ExampleComponent = (props: Props) => {
  return(
    <div className="delete-btn" onClick={() => props.optionalClickFn?.()} >
      <FontAwesomeIcon icon={faTimesCircle} color="red" />
    </div>
  )
}

这样做的好处是可以完全去掉三元判断，即使optionalClickFn不存在，点击事件也不会触发任何操作，同时TypeScript不会报错。

方案2：解构props时赋值默认空函数 #

在组件内部解构props的时候，给optionalClickFn设置一个默认的空函数，这样它就永远不会是undefined：

const ExampleComponent = ({ optionalClickFn = () => {}, ...rest }: Props) => {
  return(
    <div className="delete-btn" onClick={optionalClickFn} >
      <FontAwesomeIcon icon={faTimesCircle} color="red" />
    </div>
  )
}

这个方案更简洁，还可以直接把函数传给onClick，不需要额外的箭头函数包裹。

方案3：在箭头函数内部再次判断 #

如果你不想去掉三元判断，也可以在onClick的回调里再次检查函数是否存在：

const ExampleComponent = (props: Props) => {
  return(
    props.optionalClickFn ? 
      <div className="delete-btn" onClick={() => {
        if (props.optionalClickFn) {
          props.optionalClickFn();
        }
      }} >
        <FontAwesomeIcon icon={faTimesCircle} color="red" />
      </div> : 
      <div></div>
  )
}

这种方法虽然可行，但代码会显得冗余，不如前两种方案优雅。

方案4：非空断言（不推荐） #

如果你非常确定在进入onClick回调时optionalClickFn一定存在，可以使用非空断言!来告诉TypeScript忽略undefined的可能性：

const ExampleComponent = (props: Props) => {
  return(
    props.optionalClickFn ? 
      <div className="delete-btn" onClick={() => props.optionalClickFn!()} >
        <FontAwesomeIcon icon={faTimesCircle} color="red" />
      </div> : 
      <div></div>
  )
}

⚠️ 注意：这个方法有运行时风险，如果后续代码逻辑变化导致optionalClickFn变成undefined，会直接抛出错误，所以除非你能100%保证函数存在，否则不建议使用。

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