TypeScript枚举索引报错TS(7053)及DOM元素消失问题求助

错误原因 #

1. 枚举值误用：你把EnumUrl[BRAND as keyof typeof EnumUrl]得到的字符串URL赋值给了url变量，之后又尝试用url[BRAND]去索引这个字符串——字符串的索引只能是数字或单个字符，用"xxx"这类字符串索引必然返回undefined。
2. React渲染规则：当<a>标签的href属性和内容都为undefined时，React会判定该元素无有效内容，直接跳过渲染，导致DOM中看不到这个标签。

正确解决方案 #

方案一：直接用类型断言获取URL #

保留枚举定义，在JSX中直接对BRAND做类型断言，确保它符合枚举的键类型：

enum EnumUrl {
  xxx = "https://example.com/",
  yyy = "https://example.net"
}

Visit <a href={EnumUrl[BRAND as keyof typeof EnumUrl]} target="_blank" rel="noopener noreferrer">
  {EnumUrl[BRAND as keyof typeof EnumUrl]}
</a>

方案二：提前缓存URL（避免重复代码） #

如果需要多次使用这个URL，可以提前把它存到变量里：

enum EnumUrl {
  xxx = "https://example.com/",
  yyy = "https://example.net"
}

// 提前获取当前URL
const currentUrl = EnumUrl[BRAND as keyof typeof EnumUrl];

// JSX中直接用缓存的变量
Visit <a href={currentUrl} target="_blank" rel="noopener noreferrer">
  {currentUrl}
</a>

优化：给BRAND指定类型（更规范） #

如果BRAND是你自己定义的变量，可以直接给它指定类型，省去每次断言的麻烦：

// 定义BRAND时指定类型为枚举的键类型
const BRAND: keyof typeof EnumUrl = "xxx";

enum EnumUrl {
  xxx = "https://example.com/",
  yyy = "https://example.net"
}

之后在JSX中就可以直接使用EnumUrl[BRAND]，不会再出现TS类型错误。

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