Next.js + TypeScript：如何为字符串定义Enum并修复代码问题

你的代码存在两个核心问题：

1. 类型不匹配：你定义的Label枚举，其值是翻译后的字符串（比如Label.dermatology = 'Dermatologi'），但实际传入的props是枚举的键（比如'dermatology'，string类型），导致ISpecialist的label?: Label类型和传入值不兼容，触发类型报错。
2. 渲染逻辑错误：specialist.label === Label是拿单个值和整个枚举对象做比较，结果永远为false，同时代码还缺失闭合的}。

下面是适配需求的两种解决方法：

方法1：联合类型规范取值 + 映射对象处理显示 #

这种方式既严格限制传入的string取值范围，又能正确映射到翻译文本：

// 定义允许的label取值联合类型，强制传入值只能是指定的几个字符串
type LabelKey = 'dermatology' | 'psychology' | 'rheumatology' | 'physiology';

// 创建映射对象，关联传入的键和要显示的翻译文本
const LabelMap: Record<LabelKey, string> = {
  dermatology: 'Dermatologi',
  psychology: 'Psykologi',
  rheumatology: 'Reumatologi',
  physiology: 'Fysiologi',
};

interface ISpecialist {
  label?: LabelKey; // 用联合类型匹配传入的string类型
}

export default function Specialist({ specialist }: { specialist: ISpecialist }) {
  // 根据传入的key获取对应显示文本，无值时显示空字符串
  const displayText = specialist.label ? LabelMap[specialist.label] : '';
  
  return (
    <div>
      <span>{displayText}</span>
    </div>
  );
}

方法2：调整枚举结构兼容string类型 #

如果想保留枚举的定义方式，可以把枚举值设为和键一致，同时兼容枚举类型和string类型的传入值：

// 调整枚举，让键和值一致，匹配传入的string类型
enum Label {
  dermatology = 'dermatology',
  psychology = 'psychology',
  rheumatology = 'rheumatology',
  physiology = 'physiology',
}

interface ISpecialist {
  label?: Label | keyof typeof Label; // 兼容枚举类型和对应的string键
}

export default function Specialist({ specialist }: { specialist: ISpecialist }) {
  // 依然用映射对象处理翻译文本
  const LabelMap: Record<Label, string> = {
    [Label.dermatology]: 'Dermatologi',
    [Label.psychology]: 'Psykologi',
    [Label.rheumatology]: 'Reumatologi',
    [Label.physiology]: 'Fysiologi',
  };

  // 类型断言确保取值安全
  const displayText = specialist.label ? LabelMap[specialist.label as Label] : '';
  
  return (
    <div>
      <span>{displayText}</span>
    </div>
  );
}

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