React Hook Form通用字段组件TypeScript类型错误求助

我正在实现一个既能在表单根层级使用、又能作为嵌套字段的表单字段组件，相关代码如下：

import { FieldPath, FieldValues, useFormContext, UseFormReturn, RegisterOptions } from 'react-hook-form';
import React, { ReactNode } from 'react';

export type FirstNameField = {
  firstName: string;
};

type GenericFormType<T, NS extends string | never = never> = NS extends never ? T : Record<NS, T>;

export type FirstNameProps<T extends string | never = never> = {
  namespace?: T;
};

export const FirstName = <T extends string | never = never>({ namespace }: FirstNameProps<T>) => {
  const form = useFormContext<GenericFormType<FirstNameField, T>>();
  return (
    <FormInput<GenericFormType<FirstNameField, T>>
      {...form}
      fieldName={namespace ? `${namespace}.firstName` : 'firstName'}
      label="First name"
      validation={{
        required: 'Required',
      }}
    />
  );
};

interface Props<T extends FieldValues = FieldValues> extends UseFormReturn<T> {
  label?: ReactNode;
  fieldName: FieldPath<T>;
  validation?: RegisterOptions;
}

export function FormInput<T extends FieldValues = FieldValues>(props: Props<T>) {
  return null;
}

在fieldName={namespace ? ${namespace}.firstName : 'firstName'}这一行出现TypeScript错误：

TS2322: Type 'firstName' | `${T}.firstName` is not assignable to type Path<GenericFormType<FirstNameField, T>>
Type string is not assignable to type Path<GenericFormType<FirstNameField, T>>

解决方案 #

TypeScript无法自动推断出模板字符串生成的字段路径与GenericFormType对应的FieldPath类型匹配，因为条件类型GenericFormType让类型推导逻辑变得复杂。可以通过以下两种方式修复：

方案一：使用辅助类型明确字段路径

定义一个辅助类型来推导对应场景下的合法字段路径，再通过类型断言让编译器认可：

import { FieldPath, FieldValues, useFormContext, UseFormReturn, RegisterOptions } from 'react-hook-form';
import React, { ReactNode } from 'react';

export type FirstNameField = {
  firstName: string;
};

// 优化GenericFormType的定义，让结构更清晰
type GenericFormType<T, NS extends string | never = never> = 
  NS extends never ? T : { [K in NS]: T };

export type FirstNameProps<T extends string | never = never> = {
  namespace?: T;
};

// 辅助类型：根据namespace是否存在，推导合法的字段路径
type FirstNameFieldPath<T extends string | never> = 
  T extends never ? 'firstName' : `${T}.firstName`;

export const FirstName = <T extends string | never = never>({ namespace }: FirstNameProps<T>) => {
  const form = useFormContext<GenericFormType<FirstNameField, T>>();
  
  // 用辅助类型断言fieldName的类型
  const fieldName = (namespace ? `${namespace}.firstName` : 'firstName') as FirstNameFieldPath<T>;
  
  return (
    <FormInput<GenericFormType<FirstNameField, T>>
      {...form}
      fieldName={fieldName}
      label="First name"
      validation={{
        required: 'Required',
      }}
    />
  );
};

interface Props<T extends FieldValues = FieldValues> extends UseFormReturn<T> {
  label?: ReactNode;
  fieldName: FieldPath<T>;
  validation?: RegisterOptions;
}

export function FormInput<T extends FieldValues = FieldValues>(props: Props<T>) {
  return null;
}

方案二：拆分Props类型简化推断

通过联合类型拆分FirstNameProps，让TypeScript能更明确地推断表单类型和字段路径：

import { FieldPath, FieldValues, useFormContext, UseFormReturn, RegisterOptions } from 'react-hook-form';
import React, { ReactNode } from 'react';

export type FirstNameField = {
  firstName: string;
};

// 用联合类型拆分Props，明确区分有无namespace的场景
export type FirstNameProps = 
  | { namespace?: never }
  | { namespace: string };

export const FirstName = <T extends FieldValues>({ namespace }: FirstNameProps) => {
  // 根据namespace是否存在，动态推导表单类型
  type FormType = typeof namespace extends never ? FirstNameField : Record<typeof namespace, FirstNameField>;
  const form = useFormContext<FormType>();
  
  const fieldName = namespace ? `${namespace}.firstName` : 'firstName';
  
  return (
    <FormInput<FormType>
      {...form}
      fieldName={fieldName as FieldPath<FormType>}
      label="First name"
      validation={{
        required: 'Required',
      }}
    />
  );
};

interface Props<T extends FieldValues = FieldValues> extends UseFormReturn<T> {
  label?: ReactNode;
  fieldName: FieldPath<T>;
  validation?: RegisterOptions;
}

export function FormInput<T extends FieldValues = FieldValues>(props: Props<T>) {
  return null;
}

两种方案的核心都是让TypeScript明确字段路径与表单类型的匹配关系，消除类型推断的歧义。

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