React+TypeScript TS2322错误：传递searchForBooks方法时类型不兼容

这个TS2322错误的根源很明确：你的子组件SearchBooks的Props类型是IBookSearchProps & RouteComponentProps<{}>，意味着它要求接收的Props必须同时包含你定义的searchForBooks方法，以及RouteComponentProps自带的match、location、history这三个路由相关属性。但你在父组件JumboBooks里只传了searchForBooks，缺少了路由属性，所以TypeScript判定类型不兼容。

根据你的实际需求，有几种不同的解决方式：

方案一：如果SearchBooks不需要路由功能 #

如果你的SearchBooks组件根本用不到路由相关的属性（比如不需要获取当前路由参数、跳转页面），那直接去掉Props类型里的& RouteComponentProps<{}>就行，这是最简洁的解决办法：

// SearchBooks.tsx
export class SearchBooks extends React.Component<IBookSearchProps, {}> {
  // 其余代码保持不变
}

方案二：如果SearchBooks确实需要路由属性 #

如果组件必须使用路由相关功能，那你需要把父组件的路由Props传递给子组件：

方式1：手动传递路由属性 #

父组件JumboBooks本身继承了RouteComponentProps，所以可以直接把自己的路由属性传给子组件：

// JumboBooks.tsx的render方法
<SearchBooks 
  searchForBooks={this.searchForBooks}
  match={this.props.match}
  location={this.props.location}
  history={this.props.history}
/>

方式2：用扩展运算符批量传递 #

更简洁的写法是用扩展运算符把父组件的所有路由Props一次性传过去：

// JumboBooks.tsx的render方法
<SearchBooks 
  searchForBooks={this.searchForBooks}
  {...this.props}
/>

方案三：用withRouter高阶组件自动注入路由属性 #

如果SearchBooks原本是路由直接渲染的组件，但现在被作为子组件调用，你可以用react-router提供的withRouter高阶组件包裹它，这样组件会自动获取路由Props，不需要父组件手动传递：

1. 首先导入withRouter：

import { RouteComponentProps, withRouter } from 'react-router';

2. 修改组件的导出方式：

// 先定义组件
class SearchBooks extends React.Component<IBookSearchProps & RouteComponentProps<{}>, {}> {
  // 组件代码不变
}

// 用withRouter包裹后导出
export default withRouter(SearchBooks);

额外注意事项 #

还要确认两个组件中使用的SearchParameters是同一个类型——如果是在SearchBooks里定义的，要确保父组件JumboBooks正确导入了这个类型，而不是重复定义了同名的接口，否则也可能导致类型不匹配的问题。

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