React+TypeScript报错：void类型表达式无法做真值检测的解决方法

问题原因 #

你遇到的错误是因为在onClick事件处理中使用了逻辑或运算符||：

onClick={() => setModalVisible(true) || setSrc(`/imgs/${img}`)}

React的状态更新函数（比如setModalVisible）返回值类型是void，而TypeScript不允许对void类型的表达式进行真值检测（||会尝试判断左值的真假），所以触发了报错。

你修改itemProps中setModalVisible的返回类型为boolean是错误的，因为实际React提供的状态更新函数（比如useState返回的setter）本身就是void类型，这样修改会导致父组件传递的函数类型不匹配，引发新的类型错误。

正确解决方案 #

直接在箭头函数的块级作用域中依次调用两个函数即可，不需要依赖逻辑运算符：

onClick={() => {
  setModalVisible(true);
  setSrc(`/imgs/${img}`);
}}

这样既满足TypeScript的类型要求，又能实现点击后同时触发模态框显示和设置图片源的需求。

另外，注意不要修改itemProps中setModalVisible的返回类型，保持原本的void即可，因为这和React状态更新函数的实际类型一致。

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