React+TypeScript中条件绑定onClick报类型错误的解决方法

报错的核心原因是条件表达式返回值类型不符合onClick的类型要求：
当disabled为true时，!disabled运算结果为false，短路与!disabled && onClick会直接返回false，最终整个表达式的推断类型为false | (() => void) | undefined。但React定义的div元素onClick属性只接受MouseEventHandler<HTMLDivElement>或者undefined，不接受布尔值false，因此触发类型报错。

另外你当前Props中定义的onClick?: () => void类型也不够严谨，React的鼠标事件处理函数默认会接收事件对象作为参数，建议对齐内置类型定义。

方案1：使用三元表达式（最推荐，逻辑清晰无歧义） #

直接用三元判断明确返回合法值，从根源避免返回布尔值：

// 先引入需要的类型
import type { MouseEventHandler } from 'react';

interface ComponentProps {
  children: React.ReactNode;
  disabled?: boolean;
  // 修正onClick类型，对齐React内置定义
  onClick?: MouseEventHandler<HTMLDivElement>;
}

// 组件内使用
<div onClick={!disabled ? onClick : undefined}>{children}</div>

该写法和你原本预期逻辑完全一致：未禁用时绑定传入的onClick函数，禁用时传undefined不绑定事件，TS可以正确推断类型，不会报错。

方案2：修正短路逻辑的返回值 #

如果你习惯用短路写法，可以把短路产生的false手动转为undefined，注意不要使用??，因为??只会排除null和undefined，不会处理false：

<div onClick={(!disabled && onClick) || undefined}>{children}</div>

由于事件处理函数本身是truthy值，不存在合法的假值函数，该写法逻辑和三元完全一致，也能通过TS校验。

不推荐的写法 #

不要直接给onClick传短路运算的原始结果，比如：

// 会报类型错误，因为可能返回false
<div onClick={!disabled && onClick}>{children}</div>

虽然React运行时会自动忽略布尔类型的props值，不会真的绑定错误的事件，但TS类型层不允许这种传值。

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