React组件类型错误：{closeCallback: MouseEventHandler}无法分配给目标类型

你遇到两个核心问题：

1. 控制台提示 closeCallback is not a function
2. CloseModalButton组件的closeCallback属性标红，TypeScript报错：

Type '{ closeCallback: MouseEventHandler; }' is not assignable to type 'IntrinsicAttributes & MouseEventHandler'. Property 'closeCallback' does not exist on type 'IntrinsicAttributes & MouseEventHandler'.ts(2322)

问题根源 #

CloseModalButton组件的参数定义错误——React组件的props本质是一个对象，你直接把函数作为参数传入，相当于把整个props对象当成了closeCallback函数，导致类型不匹配，调用时自然不是合法函数。

修复步骤 #

1. 修正CloseModalButton的props类型与结构 #

给组件定义正确的props类型，将closeCallback作为props对象的属性解构出来：

import React from 'react';

// 明确组件的props类型
type CloseModalButtonProps = {
  closeCallback: React.MouseEventHandler<HTMLElement>;
};

export const CloseModalButton = ({ closeCallback }: CloseModalButtonProps) => {
  return (
    <button
      type="button"
      onClick={closeCallback}> {/* 直接传递函数，无需额外包裹箭头函数 */}
      X
    </button>
  );
};

2. 简化onClick调用（可选优化） #

原代码中onClick={() => closeCallback()}可以简化为onClick={closeCallback}，因为closeCallback本身就是符合MouseEventHandler类型的函数，直接传递更简洁高效。

3. 确认其他组件类型一致性 #

BasicModal的类型定义已经正确，无需修改，保持如下即可：

import React, { PropsWithChildren } from 'react';

type ModalProps = {
  closeCallback: React.MouseEventHandler<HTMLElement>;
} & PropsWithChildren;

export const BasicModal = (props: ModalProps) => {
  const { closeCallback, children } = props;
  return (
    <section className="basic-modal">
      <CloseModalButton closeCallback={closeCallback} />
      {children}
    </section>
  );
};

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