React Router传递路径参数时TypeScript类型不匹配问题求助

问题原因 #

你定义的PathParams要求appTypeId和submissionId为string | null且必存在，但React Router中带?的可选参数，对应的Params<string>类型里这两个属性是string | undefined；同时TypeScript无法自动将Record<string, string | undefined>类型推断为你定义的PathParams接口，导致类型校验失败。

解决方案 #

方案1：手动转换参数类型（推荐） #

在loader函数中，将React Router返回的params转换为符合PathParams的结构，把undefined转为null，同时明确类型：

const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    id: 'root',
    loader: () => defaulNewAPIs(),
    children: [
      {
        index: true,
        element: <ReferralDetails status="new" />,
        path: '/:appTypeId?/:submissionId?',
        loader: ({ params }) => {
          const pathParams: PathParams = {
            appTypeId: params.appTypeId ?? null,
            submissionId: params.submissionId ?? null,
          };
          return getSubmission(pathParams);
        },
      },
    ],
  },
])

方案2：调整PathParams接口兼容React Router类型 #

如果允许修改函数的参数类型定义，可以让PathParams的属性兼容string | undefined，后续在函数内部再处理为null：

interface PathParams {
  appTypeId: string | undefined | null
  submissionId: string | undefined | null
}

async function getSubmission(params: PathParams) {
  const processedParams = {
    appTypeId: params.appTypeId ?? null,
    submissionId: params.submissionId ?? null,
  };
  const submissionExists = await getSubmissionExists(processedParams)
  return submissionExists
}

方案3：使用类型守卫确保参数结构 #

如果需要更严格的类型校验，可以添加类型守卫函数，确保params包含所需属性后再传递：

function isPathParams(params: unknown): params is PathParams {
  if (typeof params !== 'object' || params === null) return false;
  const p = params as Record<string, unknown>;
  return (
    (typeof p.appTypeId === 'string' || p.appTypeId === null) &&
    (typeof p.submissionId === 'string' || p.submissionId === null)
  );
}

// 在loader中使用
loader: ({ params }) => {
  const pathParams = {
    appTypeId: params.appTypeId ?? null,
    submissionId: params.submissionId ?? null,
  };
  if (!isPathParams(pathParams)) {
    throw new Error('Invalid path parameters');
  }
  return getSubmission(pathParams);
}

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