Next.js项目中TypeScript按钮点击函数构建失败问题求助

问题原因 #

你的Button组件接口IButton未包含原生<button>元素的属性（如onClick），向组件传递onClick回调时，TypeScript会因类型不兼容抛出错误，导致Next.js构建失败。同时，调用端的hey函数参数类型定义错误，不符合React事件处理规范。

修复步骤 #

1. 修正Button组件的类型定义 #

修改button.tsx中的接口，让它继承React原生按钮的属性接口，自动支持所有<button>原生属性：

import { tw } from 'twind';
import type { ButtonHTMLAttributes } from 'react';

// 继承原生按钮属性接口，自动包含onClick等属性
interface IButton extends ButtonHTMLAttributes<HTMLButtonElement> {
  primary?: boolean;
  children: React.ReactNode | string;
  modifier?: string;
}

const Button = ({ primary, modifier, children, ...rest }: IButton) => {
  const baseStyle = `font-sans font-medium py-2 px-4 border rounded`;
  const styles = primary
    ? `bg-indigo-600 text-white border-indigo-500 hover:bg-indigo-700`
    : `bg-white text-gray-600 border-gray-300 hover:bg-gray-100`;

  return (
    <button type="button" className={tw(`${baseStyle} ${styles} ${modifier ?? ``}`)} {...rest}>
      {children}
    </button> 
  );
};

export default Button;

2. 修正调用端的事件回调函数类型 #

hey函数的参数应为React鼠标事件对象，而非事件处理器类型：

const hey = (e: React.MouseEvent<HTMLElement>) => {
  sendEmail();
  setText("Thank you!");
};

<Button onClick={hey}>{text}</Button>

说明 #

• 继承ButtonHTMLAttributes<HTMLButtonElement>后，组件自动支持所有原生按钮属性（如onClick、disabled等），无需手动逐个定义。
• 事件回调函数的参数必须是对应的事件对象类型，TypeScript才能正确推断类型，避免构建错误。

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