如何为接收state/setState参数的props定义TypeScript接口？

React.FunctionComponent（可简写为React.FC）是泛型类型，未手动传入Props类型参数时，它默认的props类型为{ children?: React.ReactNode }，仅支持可选的children属性，你自定义的value、setValue属性不在默认类型范围内，因此触发类型不兼容报错。

将你自定义的Props接口作为泛型参数传入React.FunctionComponent即可，传入后TS会自动推导组件入参的类型，不需要再在参数处重复标注Props类型：

interface Props {
    value: string
    setValue: React.Dispatch<React.SetStateAction<string>>
    // 如果你要求children必须传则保留此行，如果children是可选的可以删除，React.FC默认会自带可选的children属性
    children: React.ReactNode
}

// 核心修改：给React.FunctionComponent传入Props泛型参数
const SearchInput: React.FunctionComponent<Props> = ({
    value,
    setValue,
    children
}) => {
    // 组件内部逻辑
    return <>{/* 组件渲染内容 */}</>
}

如果你不想使用React.FC写法，也可以直接给组件的props参数标注类型，这种写法不会默认注入children属性，更灵活：

const SearchInput = ({ value, setValue, children }: Props) => {
    return <>{/* 组件渲染内容 */}</>
}

额外注意：你原代码的Props中定义了必填的children属性，但解构时没有引入该参数，使用组件时如果不传children也会触发类型报错，不需要必填children可将类型改为children?: React.ReactNode。

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