React Router action方法参数类型定义问题（.NET C#开发者求助）

核心类型导入与使用 #

React Router 为 action 函数的参数提供了专属类型 ActionFunctionArgs，直接从 react-router-dom 导入即可：

import { ActionFunctionArgs } from "react-router-dom";

export async function action({ request, params }: ActionFunctionArgs) {
  const formData = await request.formData();
  const updates = Object.fromEntries(formData);
  // 后续逻辑...
}

自定义 Params 类型 #

如果你的路由包含动态参数（比如教程中的 contactId），可以通过自定义接口约束 params 的结构：

import { ActionFunctionArgs, Params } from "react-router-dom";

// 定义匹配路由的参数接口
interface ContactParams extends Params {
  contactId: string;
}

export async function action({ request, params }: ActionFunctionArgs & { params: ContactParams }) {
  // 此时 params.contactId 会被正确推断为 string 类型
  const contactId = params.contactId;
  const formData = await request.formData();
  const updates = Object.fromEntries(formData);
  // 后续逻辑...
}

Request 类型的说明 #

你调试看到的 Request 是浏览器原生 DOM API 类型，无需额外导入。只要你的 tsconfig.json 中 compilerOptions.lib 包含 "dom"（默认配置通常已包含），TypeScript 就能自动识别该类型：

{
  "compilerOptions": {
    "lib": ["dom", "dom.iterable", "esnext"]
  }
}

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