升级React&TypeScript后，connectRefinementList无法接收子元素

问题原因 #

从react-instantsearch-dom 6.22.0升级到6.39.1后，库的TypeScript类型定义变得更严格：connectRefinementList返回的ComponentClass<RefinementListExposed>类型仅包含RefinementListExposed中声明的属性，不再隐式支持children属性传递。旧版本由于类型检查宽松，允许这种未显式声明的子元素传递，现在严格校验后触发TS错误。

解决方案 #

通过扩展类型定义，显式将children合并到组件的props类型中，修正connect后的组件类型：

import React from 'react';
import { connectRefinementList, RefinementListExposed, RefinementListProvided } from 'react-instantsearch-dom';

// 定义包含children的自定义props类型
type CustomRefinementListProps = RefinementListExposed & React.PropsWithChildren<{}>;

// 自定义组件同时接收connect注入的属性和自定义props（含children）
const RefinementList: React.FC<RefinementListProvided & CustomRefinementListProps> = (props) => {
  // 这里可以正常使用refine、items等注入属性，以及children
  return (
    <div>
      {/* 你的业务逻辑 */}
      {props.children}
    </div>
  );
};

// 手动指定connect后的组件类型，确保支持children属性
const CustomRefinementList = connectRefinementList(RefinementList) as React.ComponentType<CustomRefinementListProps>;

// 使用示例（不再触发TS错误）
<CustomRefinementList attribute="some-attr" limit={5} searchable showMore>
  Some children here
</CustomRefinementList>

额外说明 #

• 避免使用any类型：原代码中React.FC<React.PropsWithChildren<any>>的any会掩盖类型问题，明确类型后能获得更可靠的TS校验。
• 若不需要子元素传递，可直接移除children相关代码，保持与RefinementListExposed类型一致即可。

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