我喜欢Steve's approach，但这里有一个替代方案（见内联注解）：

// The props for `Child`
type ChildProps<FieldNames> = {
    field: FieldNames;
};

// Define a generic type for the Child component.
type ChildType<FieldNames extends string> = (props: ChildProps<FieldNames>) => React.ReactElement;

// Define the component in terms of `string`
const Child: ChildType<string> = (props: ChildProps<string>) => {
    return /*...*/;
};

// Define a refined child that can only use `User` names for `field`
type User = { name: string; age: number };
const ThisChild: ChildType<keyof User & string> = Child;

// Use it
const Parent = (props: User) => {
    return (
        <div>
            <ThisChild field="name" /> // ok
            <ThisChild field="age" /> // ok
            <ThisChild field="firstName" /> // not ok
        </div>
    );
};

Playground示例

在这种情况下，您将需要提供一个显式泛型。这是您正在寻找的吗？

type User = { name: string; age: number };
const Parent = (props: User) => {
  return (
    <div>
      <Child<User> field="name" /> // ok
      <Child<User> field="age" /> // ok
      <Child<User> field="firstName" /> // not ok
    </div>
  );
};

type ChildProps<T> = {
  field: keyof T;
};

const Child = <T extends unknown>(props: ChildProps<T>) => {
  return null;
};

Playground示例