React TS传带参函数给子组件报Expected 0 arguments, but got 1错误

报错根因 #

TypeScript 采用结构化类型校验规则，你在子组件IProps接口中把deleteImgfunc声明为无入参函数，和实际场景下“子组件调用时需要传入文件名参数、父组件实现逻辑也需要接收对应参数”的函数真实结构不匹配，因此触发Expected 0 arguments, but got 1的类型校验错误。
另外你贴的子组件代码里<Pressable标签误多写了一个右花括号，属于语法笔误，修复时可以一并处理。

修复操作 #

• 修改子组件IProps接口中deleteImgfunc的类型签名，明确声明入参类型为字符串
• 给父组件中用useCallback包裹的deleteImgfunc补全入参类型，避免隐式any类型告警
• 修正子组件里<Pressable标签多余的右花括号笔误

修复后代码 #

父组件 insertFarmDiaryDetail.tsx #

import { useCallback } from 'react';
import InsertFarmDiarySubPage from './InsertFarmDiarySubPage';

const insertFarmDiaryDetail = () => {
  // 补全入参类型
  const deleteImgfunc = useCallback((value: string) => {
    // 原有删除图片业务逻辑
  }, []);

  return (
    <InsertFarmDiarySubPage
      deleteImgfunc={deleteImgfunc}
    />
  )
}

export default insertFarmDiaryDetail;

子组件 InsertFarmDiarySubPage.tsx #

import { forwardRef } from 'react';
import { Pressable } from 'react-native';

// 修正函数类型：声明该方法接收一个string类型的文件名参数
interface IProps {
    deleteImgfunc?: (imgName: string) => void;
}

const v = {
  index: 0,
  name: "growthLength 1",
  size: 22396,
  type: "image/jpeg",
  uri: "hjk"
}

const InsertClass44 = forwardRef(({ deleteImgfunc }: IProps, ref: any): JSX.Element => {
    return (
      <Pressable
        onPress={() => deleteImgfunc?.(v?.name)}
      >
        {/* 原有业务组件内容 */}
      </Pressable>    
    );
})

export default InsertClass44;

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