这个问题在TypeScript开发里真的太常见了！核心原因就是你把onAdd和onEdit标记成了可选属性（带?），TypeScript的类型检查会严格确保你不会调用一个可能不存在的函数，所以直接调用就会触发这个错误。下面给你几个实用的解决办法，你可以根据自己的场景选：

1. 调用前先做存在性检查 #

这是最直接的方式，在调用函数前先判断它是否存在：

const FormTodo = ({ onAdd, onEdit }: FormProps) => {
  const handleSubmit = (data: string) => {
    // 先确认onAdd存在再调用
    if (onAdd) {
      onAdd(data);
    }
    // 同理处理onEdit
    if (onEdit) {
      onEdit(data);
    }
  };

  // 组件其他逻辑...
  return <form onSubmit={handleSubmit}>...</form>;
};

TypeScript会识别到这个判断，确认函数存在后就不会再报错。

2. 使用可选链操作符?.() #

这是TypeScript和ES2020支持的语法，写法更简洁，自动帮你处理undefined的情况：

const FormTodo = ({ onAdd, onEdit }: FormProps) => {
  const handleSubmit = (data: string) => {
    // 如果onAdd存在就调用，否则直接跳过
    onAdd?.(data);
    // 同样处理onEdit
    onEdit?.(data);
  };

  // 组件其他逻辑...
};

这种方式代码更干净，不用写额外的判断语句，非常适合简单场景。

3. 给可选属性设置空函数默认值 #

在组件参数解构的时候，给可选属性默认赋值一个空函数，这样组件内部拿到的永远是一个有效函数，不会是undefined：

const FormTodo = ({ onAdd = () => {}, onEdit = () => {} }: FormProps) => {
  const handleSubmit = (data: string) => {
    // 直接调用就行，不用担心undefined
    onAdd(data);
    onEdit(data);
  };

  // 组件其他逻辑...
};

这个方法适合那种即使父组件没传回调，你也希望组件逻辑能正常执行的场景，空函数的调用不会产生任何副作用。

4. 拆分Props，区分场景（更严谨的方式） #

如果你的Form组件在添加和编辑场景下有明确的区分（比如添加时必须传onAdd，编辑时必须传onEdit），可以拆分Props接口，用联合类型来约束：

// 先定义公共属性（如果有的话）
interface BaseFormProps {
  // 比如表单标题、初始值等公共属性
  title?: string;
}

// 添加场景的Props，onAdd必填，onEdit不需要
interface AddFormProps extends BaseFormProps {
  onAdd: (data: string) => void;
  onEdit?: never;
}

// 编辑场景的Props，onEdit必填，onAdd不需要
interface EditFormProps extends BaseFormProps {
  onEdit: (someText: string) => void;
  onAdd?: never;
}

// 组件接受联合类型的Props
const FormTodo = (props: AddFormProps | EditFormProps) => {
  const handleSubmit = (data: string) => {
    if ('onAdd' in props) {
      // 添加场景，这里onAdd是必填的，直接调用没问题
      props.onAdd(data);
    } else {
      // 编辑场景，这里onEdit是必填的
      props.onEdit(data);
    }
  };

  // 组件其他逻辑...
};

这种方式能让TypeScript帮你做更严格的类型检查，避免父组件传错回调的情况，适合场景区分明确的复杂组件。

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