解决TypeScript中'undefined'无法作为索引类型的登录类型过滤错误

错误核心原因 #

这个错误的本质是**myInfo.loginType可能为undefined**，或是它的类型与loginTypeFilter的键类型不匹配，导致TypeScript判定你在用一个不确定的索引访问对象属性。

具体解决方法 #

1. 消除loginType的undefined可能性 #

方式一：给初始状态指定合法值

如果User接口中loginType是可选字段，初始化myInfo时直接赋予一个LoginTypeInterface定义的合法值：

const [myInfo, setMyInfo] = useState<User>({
  // 其他属性
  loginType: 'email' // 替换为你的LoginTypeInterface中的合法类型值
});

方式二：用可选链+默认值兜底

在访问过滤器时，先判断loginType是否存在，同时提供默认图片路径：

<Image 
  src={myInfo.loginType ? loginTypeFilter[myInfo.loginType] : '/default-login-icon.png'} 
/>

或结合非空断言与空值合并操作符（需确保运行时loginType不会真的为undefined）：

<Image 
  src={loginTypeFilter[myInfo.loginType!] ?? '/default-login-icon.png'} 
/>

2. 严格约束类型匹配 #

让loginTypeFilter的键完全覆盖LoginTypeInterface的所有可能值，消除类型不匹配风险：

// 先明确loginType的合法取值范围
type LoginType = 'email' | 'phone' | 'wechat';

// 让过滤器的键严格匹配LoginType类型
const loginTypeFilter: Record<LoginType, string> = {
  email: '/email-login-icon.png',
  phone: '/phone-login-icon.png',
  wechat: '/wechat-login-icon.png'
};

// 同时约束User接口的loginType类型
interface User {
  // 其他属性
  loginType: LoginType;
}

3. 处理异步数据加载状态 #

由于myInfo是通过axios异步获取的，数据返回前loginType可能处于undefined状态，可先渲染加载占位：

if (!myInfo.loginType) {
  return <div className="loading">加载中...</div>;
}

return <Image src={loginTypeFilter[myInfo.loginType]} />;

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