React TypeScript 子组件调用父传函数prop报ts(2349)如何解决？

问题原因 #

React函数组件的第一个参数是整个props对象，你当前子组件的定义是把整个props对象赋值给了addFriend变量，该变量的类型是你定义的FuncProps接口类型（包含addFriend属性的对象），而非你预期的函数类型，因此调用时会抛出「不存在调用签名」的错误。

修复方案 #

方案1（推荐）：解构props属性 #

修改子组件的参数定义，直接从props中解构出addFriend函数即可：

// 仅修改组件定义的第一行即可
const UserDetail = ({ addFriend }: FuncProps) => {
  // 其余代码保持不变
  const { userId } = useParams<UserIdParams>();
  const { data, done } = useFetchOne(
    `https://jsonplaceholder.typicode.com/users/${userId}`
  );

  const handleClick = () => {
    const friend: FriendListItem = {
      id: data!.id,
      name: data!.name,
      address: data!.address.street,
    };
    addFriend(friend);
  };
}

方案2：访问props下的方法属性 #

如果不解构，调用时需要从props对象下取addFriend属性再调用：

const handleClick = () => {
  const friend: FriendListItem = {
    id: data!.id,
    name: data!.name,
    address: data!.address.street,
  };
  // 从props对象中访问addFriend方法
  addFriend.addFriend(friend);
};

额外优化建议 #

你可以把FriendListItem接口抽离到公共的类型定义文件中，避免父子组件重复定义，后续修改字段时只需改一处即可保证类型同步。

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