Laravel 12 React Starter Kit类型错误：FormOptions类型中不存在customer_id属性

这个类型错误是Inertia.js的TypeScript类型检查导致的——默认情况下，useForm返回的post方法，其第二个参数的FormOptions类型并没有包含customer_id这个属性，所以TypeScript会判定你传入的字段不合法。下面是具体的解决方案和代码优化建议：

问题分析 #

Inertia的useForm钩子默认会对提交的表单数据做类型校验，如果你没有显式声明表单数据的结构，TypeScript就只会识别它内置的FormOptions类型中的属性，而你的customer_id不在这个默认列表里，因此抛出错误。

解决方案：显式声明表单数据类型 #

最优雅的解决方式是给useForm传入泛型，明确指定你要提交的表单数据结构。这样TypeScript就会认可customer_id是合法字段了。

修改后的ResendEmail组件代码 #

import { Button } from '@/components/ui/button';
import { useForm } from '@inertiajs/react';
import { FormEvent } from 'react';

interface ResendEmailProps {
  customerId: string;
}

// 定义表单数据的类型，与后端接收的字段匹配
interface ResendEmailFormData {
  customer_id: string;
}

export default function ResendEmail({ customerId }: ResendEmailProps) {
  // 给useForm传入泛型，告知TypeScript表单数据的结构
  const { post, processing } = useForm<ResendEmailFormData>();

  const handleResendEmail = (e: FormEvent) => {
    e.preventDefault();
    post(route('customer.resendemail'), {
      customer_id: customerId,
    });
  };

  return (
    <form method="POST" onSubmit={handleResendEmail}>
      <Button variant="outline" size="sm" disabled={processing} asChild>
        <button type="submit">Resend Email</button>
      </Button>
    </form>
  );
}

代码优化说明 #

1. 泛型定义表单结构：通过useForm<ResendEmailFormData>，我们明确告诉TypeScript提交的表单数据包含customer_id字段，解决了类型不匹配的问题。
2. 简化事件处理函数：移除了原本的柯里化写法，因为组件props已经传入了customerId，直接在handleResendEmail中使用即可，让代码更简洁易读。

备选方案（不推荐） #

如果你想快速临时解决问题，也可以用类型断言跳过TypeScript检查，但这会失去类型安全的优势，不建议长期使用：

post(route('customer.resendemail'), {
  customer_id: customerId,
} as any);

额外验证 #

确认你的后端路由配置正确，customer.resendemail对应的是POST请求，并且控制器能正常接收customer_id参数（你的控制器代码看起来是没问题的）。

内容来源于stack exchange