Ant Design Cascader组件onChange属性报错，如何解决？

你遇到的TypeScript类型不匹配报错，核心原因是：Ant Design的Cascader组件默认采用DefaultOptionType（其value字段类型为string | number），但你自定义了value为string的Option接口，却未给Cascader指定对应泛型，导致onChange函数的参数类型和组件预期类型不兼容。

解决方法 #

以下两种方式任选其一即可：

方式1：给Cascader指定自定义Option泛型

在使用Cascader组件时，显式传入你定义的Option泛型，让组件自动推导正确的参数类型：

const App: React.FC = () => (
  <Cascader<Option>
    options={options}
    expandTrigger="hover"
    displayRender={displayRender}
    onChange={onChange}
  />
);

方式2：调整onChange参数类型适配组件默认定义

如果不想指定泛型，可以导入组件内置的SingleValueType类型，修改onChange的参数类型：

import { SingleValueType } from 'antd/es/cascader';

const onChange = (value: SingleValueType[]) => {
  console.log(value);
};

额外说明 #

推荐使用方式1，因为它能和你自定义的Option接口完全对齐，从根源避免后续类型不一致问题。官方示例可能未显式处理TypeScript泛型细节，导致直接复制后在严格类型检查环境下报错。

内容的提问来源于stack exchange，提问作者Joshua Lloyd Doros