React组件中onClick事件类型不匹配，如何设置正确类型？

问题代码示例 #

interface BtnItem {
  label: string;
  onClick?: (id: string) => void;
}

interface DataProps {
  id: string;
  buttons: BtnItem[];
}

const DataButton: React.FC<{
  button: BtnItem;
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
}> = ({ button, onClick }) => {
  return (
    <div onClick={onClick}>
      <div>{button.label}</div>
    </div>
  );
};

const Data: React.FC<DataProps> = ({ id, buttons }) => {
  return (
    <>
      <h1> What is the problem here? </h1>
      {buttons.map((button) => (
        <DataButton button={button} onClick={button.onClick} />
      ))}
    </>
  );
};

export default Data;

错误信息 #

Type '((id: string) => void) | undefined' is not assignable to type '((event: MouseEvent<HTMLElement, MouseEvent>) => void) | undefined'.
  Type '(id: string) => void' is not assignable to type '(event: MouseEvent<HTMLElement, MouseEvent>) => void'.
    Types of parameters 'id' and 'event' are incompatible.
      Type 'MouseEvent<HTMLElement, MouseEvent>' is not assignable to type 'string'.ts(2322)

问题根源 #

BtnItem接口定义的onClick是接收string类型参数的函数，但DataButton组件的onClick属性要求的是接收React.MouseEvent类型参数的函数，两者参数类型完全不兼容，导致TypeScript类型检查报错。

解决方案 #

根据业务需求选择以下两种方案之一：

方案1：适配需要传递id的业务场景

如果按钮点击时需要传递id参数，调整DataButton的props类型，让它匹配BtnItem的onClick类型，并在点击时主动传入id：

// 修改DataButton组件定义
const DataButton: React.FC<{
  button: BtnItem;
  onClick?: (id: string) => void; // 与BtnItem的onClick类型保持一致
  id: string; // 新增id属性，用于传递给onClick
}> = ({ button, onClick, id }) => {
  return (
    <div onClick={() => onClick?.(id)}> {/* 点击时调用onClick并传入id */}
      <div>{button.label}</div>
    </div>
  );
};

// 修改Data组件中DataButton的调用，传入id
const Data: React.FC<DataProps> = ({ id, buttons }) => {
  return (
    <>
      <h1> What is the problem here? </h1>
      {buttons.map((button) => (
        <DataButton 
          key={button.label} 
          button={button} 
          onClick={button.onClick} 
          id={id} 
        />
      ))}
    </>
  );
};

方案2：使用标准React点击事件类型

如果不需要传递id，只是普通的点击事件，修改BtnItem的onClick类型为标准的React点击事件类型：

// 修改BtnItem接口
interface BtnItem {
  label: string;
  onClick?: (event: React.MouseEvent<HTMLElement>) => void; // 改为标准点击事件类型
}

这样button.onClick的类型就和DataButton要求的onClick类型完全匹配，直接传递即可。

内容的提问来源于stack exchange，提问作者The Dead Man