React调用自定义Hook报参数类型不匹配错误如何解决？

• 自定义Hook误用了React.FC类型：React.FC是React函数组件的专用类型，会自动为入参添加PropsWithChildren包装，要求入参必须是一个支持可选children属性的对象，而自定义Hook不属于组件，不应使用该类型。
• 入参传递形式不匹配：useMatchingList定义时要求接收一个包含divingType、pageNumber属性的对象作为入参，但调用时直接传入了两个独立的位置参数，类型完全不匹配。

提供两种可行修改方式，根据开发习惯选择即可：

方案1：保持Hook接收对象入参 #

1. 移除Hook的React.FC类型定义，直接声明入参类型：

// useMatchingList.tsx
import { DivingType } from "./enum";

interface IUseMatchingListProps {
  divingType: DivingType
  pageNumber: number
}
export const useMatchingList = ({ divingType, pageNumber }: IUseMatchingListProps) => {
  // 原有逻辑保持不变
}

2. 调整调用时的传参形式，传入对象：

// home.tsx 调用处修改
useMatchingList({ divingType, pageNumber })

方案2：修改Hook为接收位置参数 #

如果更习惯直接传多个参数，直接修改Hook的参数定义即可，原有调用代码不需要变动：

// useMatchingList.tsx
import { DivingType } from "./enum";

export const useMatchingList = (divingType: DivingType, pageNumber: number) => {
  // 原有逻辑保持不变
}

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