将Server Action传入自定义组件时出现类型错误，如何解决？

问题根源 #

你定义的ClientForm组件使用了默认的FC类型，但未显式声明支持的Props，导致TypeScript无法识别action等HTML表单原生属性和Radix Form的扩展属性。

解决方案 #

1. 定义包含所需属性的Props类型 #

从Radix UI导入表单根组件的Props，同时结合React提供的HTML表单原生属性类型，确保所有需要传递的属性都有类型支持：

"use client";
import { FC, PropsWithChildren } from "react";
import * as Form from "@radix-ui/react-form";

// 组合Radix Form根组件Props与HTML表单原生属性，同时支持children
type ClientFormProps = PropsWithChildren<
  Form.FormRootProps & React.FormHTMLAttributes<HTMLFormElement>
>;

2. 修正组件的类型约束 #

将组件的类型从默认FC改为自定义的ClientFormProps，并确保所有Props透传给Radix的Form.Root：

const ClientForm: FC<ClientFormProps> = (props) => (
  <Form.Root {...props}>
    <Form.Field name="name">
      <Form.Label>Name</Form.Label>
      <Form.Control type="text" required />
    </Form.Field>
    <Form.Submit>OK</Form.Submit>
  </Form.Root>
);

export default ClientForm;

3. 验证使用场景 #

现在在page.tsx中传递action={create}或其他HTML表单属性（如method="POST"）时，TypeScript会正确识别属性类型，不再抛出错误：

import ClientForm from "@/components/ClientForm";
import { create } from "@/app/actions";

const Home = () => {
  return (
    <section>
      <h1>Home</h1>
      <ClientForm action={create} method="POST" />
    </section>
  );
};

补充说明 #

• Form.FormRootProps包含Radix Form根组件的所有内置属性（如onSubmit、defaultValues等）
• React.FormHTMLAttributes<HTMLFormElement>覆盖了所有原生HTML表单属性，包括Server Action所需的action
• 如果你的Server Action有特定的参数或返回值，可以进一步细化action属性的类型，比如：action: () => Promise<YourResponseType>

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