如何修复React+TS中{handleIndex:()=>void}无法赋值给IntrinsicAttributes报错

你遇到的Type ‘{handleIndex: ()=> void}’ is not assignable to type 'IntrinsicAttributes'报错，核心是BasicInfo组件没有声明可接收的自定义Props类型：
TypeScript做JSX类型检查时，没有声明自定义Props的组件，会被默认判定为仅支持JSX内置的通用属性（也就是IntrinsicAttributes，包含key、ref这类所有JSX元素都支持的基础属性），此时传入组件类型定义里不存在的handleIndex属性，就会触发类型不匹配报错。

• 为BasicInfo组件声明明确的Props类型
  你需要在定义BasicInfo组件时，明确标注它支持接收handleIndex属性，以及对应属性的类型，参考写法：

// 定义BasicInfo组件的Props类型
type BasicInfoProps = {
  handleIndex: () => void
}

// 函数组件绑定Props类型，两种常见写法选其一即可
// 写法1：直接在函数参数上标注类型
export default function BasicInfo({ handleIndex }: BasicInfoProps) {
  // 组件内部逻辑，例如点击下一步按钮时调用传入的handleIndex
  return (
    <div className="basic-info-form">
      {/* 你的基础信息表单项 */}
      <button onClick={handleIndex}>下一步</button>
    </div>
  )
}

// 写法2：如果用React.FC泛型定义组件
// const BasicInfo: React.FC<BasicInfoProps> = ({ handleIndex }) => {
//   组件逻辑
// }

• （可选优化）修复状态更新的闭包隐患
  你当前handleIndex里直接用index + 1更新状态，在连续触发更新时可能拿到旧的状态值，建议改成函数式更新写法更稳妥：

const handleIndex = () => {
  setIndex(prevIndex => prevIndex + 1)
}

改完之后TypeScript就能正确识别BasicInfo组件支持接收handleIndex属性，类型报错会直接消失。

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