如何在基于React Context的组件中为动态键推断字面量类型？

嘿，我完全明白你的需求——就是想让React Context传递的字面量类型能精准渗透到子组件，实现严格的类型校验对吧？你当前的问题核心在于Context的泛型设置没正确捕获元组的字面量类型，而且子组件依赖手动传入泛型导致类型丢失了。下面是我调整后的完整方案，能完美实现你想要的效果：

第一步：重构Context的类型定义 #

我们需要让Context存储字面量联合类型，而不是单纯的数组类型，这样子组件能直接拿到允许的键的联合类型：

// 泛型Context状态，存储只读的键数组（保留用于运行时校验）
interface NavbarContextState<TKey extends string> {
  navigationKeys: readonly TKey[];
}

// 创建Context，默认值设为null，用unknown占位后续的具体类型
const NavbarContext = createContext<NavbarContextState<unknown> | null>(null);

// 自定义Hook，返回带具体类型的Context实例
const useNavbarContext = <TKey extends string>() => {
  const context = useContext(NavbarContext);
  if (!context) {
    throw new Error("useNavbarContext must be used within a NavbarProvider");
  }
  // 断言为具体泛型类型，确保后续类型推导正确
  return context as NavbarContextState<TKey>;
};

第二步：修改NavbarProvider的泛型逻辑 #

让Provider接收只读字面量元组，这样TypeScript能自动推断出元组元素的字面量联合类型：

interface NavbarProviderProps<TKey extends string> {
  navigationKeys: readonly TKey[];
}

const NavbarProvider = <TKey extends string>({
  navigationKeys,
  children,
}: PropsWithChildren<NavbarProviderProps<TKey>>) => {
  const contextValue = useMemo(() => ({ navigationKeys }), [navigationKeys]);
  
  return (
    <NavbarContext.Provider value={contextValue}>
      {children}
    </NavbarContext.Provider>
  );
};
NavbarProvider.displayName = "NavbarProvider";

第三步：重构子组件（NavbarItem和NavigationTarget） #

核心是让子组件自动从Context中推导类型，不需要手动传入泛型。我们可以通过在组件内部使用useNavbarContext捕获类型：

// NavbarItem组件实现
interface NavbarItemBaseProps extends ComponentPropsWithoutRef<typeof Link> {
  children: React.ReactNode;
}

// 泛型TKey会自动从Context推导，限制to的取值范围
const NavbarItem = <TKey extends string>({
  to,
  children,
  ...props
}: NavbarItemBaseProps & { to: TKey }) => {
  const { navigationKeys } = useNavbarContext<TKey>();

  // 可选的运行时校验，防止编译后出现无效键
  if (!navigationKeys.includes(to)) {
    throw new Error(`Invalid navigation key: ${to}. Allowed keys: ${navigationKeys.join(", ")}`);
  }

  return <Link to={to} {...props}>{children}</Link>;
};
NavbarItem.displayName = "NavbarItem";

// NavigationTarget组件实现（逻辑和NavbarItem一致）
interface NavigationTargetBaseProps {
  children: React.ReactNode;
}

const NavigationTarget = <TKey extends string>({
  name,
  children,
}: NavigationTargetBaseProps & { name: TKey }) => {
  const { navigationKeys } = useNavbarContext<TKey>();

  if (!navigationKeys.includes(name)) {
    throw new Error(`Invalid target name: ${name}. Allowed keys: ${navigationKeys.join(", ")}`);
  }

  return <div id={name}>{children}</div>;
};
NavigationTarget.displayName = "NavigationTarget";

第四步：使用方式（和你原来的写法一致，但现在会有严格类型校验） #

<NavbarProvider navigationKeys={['abstract', 'funding', 'attachments'] as const}>
  <NavbarList>
    <NavbarItem to="abstract">Abstract</NavbarItem> {/* ✅ 类型校验通过 */}
    <NavbarItem to="invalid-key">Invalid Key</NavbarItem> {/* ❌ TypeScript直接抛出错误 */}
  </NavbarList>

  <NavigationTarget name="abstract">Hello, World!</NavigationTarget> {/* ✅ 类型校验通过 */}
  <NavigationTarget name="invalid">Oops</NavigationTarget> {/* ❌ TypeScript直接抛出错误 */}
</NavbarProvider>

为什么这个方案有效？ #

1. 元组转联合类型：通过as const把数组转为只读字面量元组，TypeScript会自动将元组元素转换为对应的联合类型（比如'abstract' | 'funding' | 'attachments'）。
2. Context传递类型：Provider的泛型TKey会捕获这个联合类型，再通过Context传递给所有子组件。
3. 子组件自动推导：子组件的泛型TKey会从useNavbarContext中自动推导，不需要手动传入，自然就把to和name的取值限制为允许的键的联合类型。

另外，保留数组用于运行时校验是很实用的补充——毕竟类型校验只在编译阶段生效，运行时校验能帮你快速定位一些边界问题。

备注：内容来源于stack exchange，提问作者Bruno Kawka