TypeScript中React onClick回调参数类型报错求解

问题根源 #

你的报错核心是useSearchbar钩子返回的setSearchBarActive类型被TS推断为boolean | (() => void)，但FontAwesomeIcon的onClick属性要求的是MouseEventHandler<SVGSVGElement>类型的函数。这大概率是因为钩子的返回值类型没有被正确约束，导致TS误判了setSearchBarActive的类型。

修复方案 #

1. 正确约束useSearchbar钩子的返回类型 #

如果你的钩子基于useState实现，需要明确指定状态类型和更新函数的类型：

import { useState, Dispatch, SetStateAction } from 'react';

// 显式指定钩子返回的元组类型
function useSearchbar(): [boolean, Dispatch<SetStateAction<boolean>>] {
  const [active, setSearchBarActive] = useState<boolean>(false);
  
  // 这里可以添加钩子的其他逻辑
  
  return [active, setSearchBarActive];
}

或者使用as const让TS自动推断正确的元组类型（更简洁）：

import { useState } from 'react';

function useSearchbar() {
  const [active, setSearchBarActive] = useState<boolean>(false);
  
  // 其他逻辑...
  
  // as const 强制TS将返回值视为只读元组，避免类型拓宽
  return [active, setSearchBarActive] as const;
}

2. 确保onClick绑定的是函数而非值 #

注意不要直接传递setSearchBarActive(true)（这会立即执行函数并返回布尔值true），正确的绑定方式是传递回调函数：

<FontAwesomeIcon 
  icon={searchIcon} 
  onClick={() => setSearchBarActive(true)} 
/>

这样TS就能正确识别onClick的类型，不会再抛出类型不匹配的错误。

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