TypeScript报错：期望对象单个键而非完整对象，如何修复？

在DatabaseModal组件中渲染<datasource.form>时出现错误，提示"expects only a single key of object instead of full"。

原始代码：

import React from 'react';
import {useState} from 'react';

type Configs = {
  mysql: {
      datasourceName: string;
      host: string;
      port: string;
      databaseName: string;
      username: string;
      password: string;
    },
  mongodb: {
      accessKeyId: string;
      secretAccessKey: string;
      region: string;
      datasourceName: string;
    }
}

async function updateMysql({config}: {config: Configs['mysql']}) {}

async function updateMongo({config}: {config: Configs['mongodb'] }) {}

const datasources = [
  {
    type: "mongodb",
    caller: updateMongo,
    form: MongoForm,
    default: {
      accessKeyId: "",
      secretAccessKey: "",
      region: "",
      datasourceName: "",
    },
  },
  {
    type: "mysql",
    caller: updateMysql,
    form: MySQLForm,
    default: {
      datasourceName: "",
      host: "",
      port: "",
      databaseName: "",
      username: "",
      password: "",
      workspaceId: "",
    },
  },
] as const;
type FormType = React.ComponentType<{
  data: Configs[keyof Configs];
  setData: (
    path: keyof Configs[keyof Configs],
    value: string
  ) => void;
}>;
function DatabaseModal({dbType}: {dbType: keyof Configs}){
    const datasource = datasources.find(({type}) => type === dbType)!;
    const [config, setConfig] = useState(datasource.default);
    const handleDataChange = (
    k: keyof Configs[keyof Configs],
    value: string
    ) => {
        // ...
    };
    async function handleSave(dbType: keyof Configs) {
        if (datasource.type === 'mongodb'){
            await datasource.caller({
                config: config as Configs['mongodb'],
            });
        } else {
            await datasource.caller({
                config:  config as Configs['mysql'],
            });
        }    
    }

    return (
        <div>
            <datasource.form data={config} setData={handleDataChange} /> // <--- error here
        </div>
    )
}

type FormProps = {
  data: Configs[keyof Configs];
  setData: (
    path: keyof Configs[keyof Configs],
    value: string
  ) => void;
}

function MongoForm(props: FormProps) {
    const region = props.setData('region', 'some region');
    return <form></form>
}

function MySQLForm(props: FormProps) {
    const host = props.setData('host', 'some host');
    return <form></form>
}

错误原因 #

核心问题是类型绑定不精确：

1. datasources用as const断言后，每个项的类型是独立字面量，但组件中未建立type与对应配置、表单的关联，TypeScript只能识别为联合类型。
2. FormProps使用Configs[keyof Configs]联合类型，导致setData的参数是所有配置键的集合（比如region和host同时有效），但实际每个表单只应接收对应数据源的键。
3. 渲染表单时，TypeScript无法推断当前datasource对应的具体表单类型，触发类型不匹配错误。

修复方案 #

通过泛型建立类型关联，让每个数据源的type、配置、表单Props严格绑定：

修复后完整代码 #

import React, { useState } from 'react';

type Configs = {
  mysql: {
    datasourceName: string;
    host: string;
    port: string;
    databaseName: string;
    username: string;
    password: string;
  },
  mongodb: {
    accessKeyId: string;
    secretAccessKey: string;
    region: string;
    datasourceName: string;
  }
}

async function updateMysql({ config }: { config: Configs['mysql'] }) {}
async function updateMongo({ config }: { config: Configs['mongodb'] }) {}

// 泛型类型：关联数据源类型与对应的配置、表单
type DatasourceItem<T extends keyof Configs> = {
  type: T;
  caller: (props: { config: Configs[T] }) => Promise<void>;
  form: React.ComponentType<{
    data: Configs[T];
    setData: (path: keyof Configs[T], value: string) => void;
  }>;
  default: Configs[T];
}

// 用satisfies确保数组符合类型约束，同时保留字面量类型
const datasources = [
  {
    type: "mongodb",
    caller: updateMongo,
    form: MongoForm,
    default: {
      accessKeyId: "",
      secretAccessKey: "",
      region: "",
      datasourceName: "",
    },
  },
  {
    type: "mysql",
    caller: updateMysql,
    form: MySQLForm,
    default: {
      datasourceName: "",
      host: "",
      port: "",
      databaseName: "",
      username: "",
      password: "",
    },
  },
] as const satisfies readonly DatasourceItem<keyof Configs>[];

// 泛型组件：基于dbType推导所有关联类型
function DatabaseModal<T extends keyof Configs>({ dbType }: { dbType: T }) {
  const datasource = datasources.find(({ type }) => type === dbType) as DatasourceItem<T>;
  const [config, setConfig] = useState<Configs[T]>(datasource.default);

  const handleDataChange = (k: keyof Configs[T], value: string) => {
    setConfig(prev => ({ ...prev, [k]: value }));
  };

  async function handleSave() {
    await datasource.caller({ config });
  }

  return (
    <div>
      <datasource.form data={config} setData={handleDataChange} />
    </div>
  )
}

// 每个表单只接收对应数据源的Props
function MongoForm(props: {
  data: Configs['mongodb'];
  setData: (path: keyof Configs['mongodb'], value: string) => void;
}) {
  return <form></form>
}

function MySQLForm(props: {
  data: Configs['mysql'];
  setData: (path: keyof Configs['mysql'], value: string) => void;
}) {
  return <form></form>
}

关键修复说明 #

• 泛型关联：DatasourceItem<T>将数据源类型与配置、表单Props绑定，TypeScript能精准推断每个项的类型。
• 组件泛型化：DatabaseModal<T>基于传入的dbType推导所有相关类型，避免联合类型的模糊性。
• 精确表单Props：每个表单只接收对应数据源的配置和键，杜绝无效键传入，类型检查更严格。
• 类型约束优化：satisfies关键字确保datasources符合类型规范，同时保留字面量类型信息，不丢失精度。

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