TS2322报错：函数无法赋值给onClick的()=>void类型如何解决

报错核心原因 #

触发ts(2322类型错误本质是函数签名不匹配：

• Button组件的onClick属性要求绑定的函数类型为() => void，即无入参、无强制返回值的函数
• 你传入的handleClick存在两个类型不符合的问题：
  • 定义了productName: string的入参，但onClick触发时默认只会传入点击事件对象，不会传入字符串类型的商品名
  • 直接返回了productList.push(productName)的执行结果，而Array.push()的返回值是数组更新后的长度（number类型），和要求的void返回值不匹配

可落地的修复方案 #

根据业务场景选对应方案即可：

场景1：追加的商品名为固定值 #

直接调整handleClick的函数签名匹配onClick要求，不要定义多余入参，同时不要直接返回push的结果：

const productList: string[] = [];
const handleClick = useCallback(() => {
  productList.push("Fixed Product Name");
}, []);

// JSX直接绑定
<Button primary onClick={handleClick}>Add Product</Button>

场景2：追加的商品名是动态值（来自state/props/闭包变量） #

直接在点击回调内部读取动态值即可，不需要给回调加自定义入参，同时记得把用到的动态值加入useCallback依赖数组：

const [targetProduct, setTargetProduct] = useState("Default Product");
const productList: string[] = [];
const handleClick = useCallback(() => {
  productList.push(targetProduct);
}, [targetProduct]);

场景3：需要复用追加逻辑，不同按钮点击追加不同商品 #

不要直接把带参的工具函数绑定给onClick，绑定的时候通过箭头函数传入对应参数即可：

const productList: string[] = [];
// 抽离的可复用添加逻辑
const addProduct = useCallback((productName: string) => {
  productList.push(productName);
}, []);

// 不同按钮传入不同商品名
<Button primary onClick={() => addProduct("Wireless Charger")}>Add Charger</Button>
<Button primary onClick={() => addProduct("Screen Protector")}>Add Protector</Button>

避坑提示 #

• 不要试图通过TS类型断言强行绕过类型校验，这种方式会掩盖逻辑问题：onClick触发时不会传入你定义的string参数，实际运行时productName会是事件对象或者undefined，导致逻辑异常
• 所有绑定给onClick的回调，不要直接返回有实际意义的值，符合void的返回要求

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