React组件传递async函数报错：语法错误与函数未找到问题排查

算力阿峰

2026-8-8

问题分析与解决

你的代码存在两个核心语法错误，均因React组件Props的TypeScript类型注解写法错误导致：

1. 错误根源：混淆了Props解构与类型注解的语法

你在组件参数中写的{ onDeleting: async (id: string) => Promise<void> }完全不符合TypeScript规范：

这种写法会被编译器识别为「给onDeleting赋值一个匿名async函数」，而非声明它的类型，因此触发';' expected的语法错误。
同时，你没有正确解构出onDeleting这个Props变量，组件内部自然找不到该名称，出现Cannot find name 'onDeleting'的错误。

2. 正确写法示例

方式一：用接口定义Props类型（推荐，代码更易维护）

import React from 'react';
import Button from './Button'; // 替换为你的Button组件路径

// 提前定义组件的Props类型
interface MyDialogProps {
  onDeleting: (id: string) => Promise<void>;
}

export const MyDialog = ({ onDeleting }: MyDialogProps) => {
  // 注意：Button的onClick默认参数是事件对象，若要传id需包裹一层函数
  const handleConfirmDelete = () => {
    const targetId = 'your-target-id'; // 替换为实际要传递的id值
    onDeleting(targetId);
  };

  return (
    <>
      <Button onClick={handleConfirmDelete}>OK</Button>
    </>
  );
};

方式二：内联类型注解（适合简单组件）

如果不想单独定义接口，也可以直接在解构时添加类型注解：

import React from 'react';
import Button from './Button';

export const MyDialog = ({ onDeleting }: { onDeleting: (id: string) => Promise<void> }) => {
  const handleConfirmDelete = () => {
    const targetId = 'your-target-id';
    onDeleting(targetId);
  };

  return (
    <>
      <Button onClick={handleConfirmDelete}>OK</Button>
    </>
  );
};