Reactjs 类型'；未定义'；不能用作索引类型

我在尝试将地图的值动态传递到主题道具时遇到此错误。我做错了什么

ps：无法添加导致eslint的“！”原因

interface ColorsInterface {
  bgColor: keyof ThemeVars['colors'];
  textColor: keyof ThemeVars['colors'];
}

const colorMap = new Map<string, ColorsInterface>([
  ['standard', { bgColor: 'primaryNormal', textColor: 'white' }],
  ['accent', { bgColor: 'accentNormal', textColor: 'white' }],
  ['neutral', { bgColor: 'grayExtraDark', textColor: 'white' }],
  ['flat', { bgColor: 'white', textColor: 'primaryNormal' }],
  ['text', { bgColor: 'white', textColor: 'grayExtraDark' }],
  ['disabled', { bgColor: 'grayLight', textColor: 'grayDark' }],
]);

export const ButtonWrapper = styled.button<ButtonInterface>`
${props =>
    props.buttonType &&
    css`
      background-color: ${props.theme.colors[colorMap.get(props.buttonType).bgColor]};
      color: ${colorMap.get(props.buttonType)?.textColor};
    `}  
`;

接口颜色接口{
bgColor:ThemeVars['colors']的键；
textColor:ThemeVars['colors']的键；
}
const colorMap=新映射([
['standard'，{bgColor:'primaryNormal'，textColor:'white'}]，
['accent'，{bgColor:'accentNormal'，textColor:'white'}]，
['neutral'，{bgColor:'GrayerExtradark'，textColor:'white'}]，
['flat'，{bgColor:'white'，textColor:'primaryNormal'}]，
['text'，{bgColor:'white'，textColor:'grayerterdark'}]，
['disabled'，{bgColor:'grayLight'，textColor:'graydurk'}]，
]);
export const ButtonWrapper=styled.button`
${props=>
道具.钮扣&&
css`
背景色：${props.theme.colors[colorMap.get（props.buttonype.bgColor]}；
颜色：${colorMap.get（props.buttonType）？.textColor}；
`}  
`;

---

我在以背景色将颜色传递给主题时出错，不幸的是，您无法强制贴图具有未定义的返回类型。因此，您需要将其替换为一个简单的对象，并为其指定一个

Record

类型

另外，我建议您创建一个类型联合

ColorMapKeys

，您应该在其中定义所有可能的键

type ColorMapKeys = 'standard' | 'accent' | 'neutral' | 'flat' | 'text' | 'disabled';

type ColorMap = Record<ColorMapKeys, ColorsInterface>;

const colorMap: ColorMap = {
  'standard': { bgColor: 'primaryNormal', textColor: 'white' },
  'accent': { bgColor: 'accentNormal', textColor: 'white' },
  'neutral': { bgColor: 'grayExtraDark', textColor: 'white' },
  'flat': { bgColor: 'white', textColor: 'primaryNormal' },
  'text': { bgColor: 'white', textColor: 'grayExtraDark' },
  'disabled': { bgColor: 'grayLight', textColor: 'grayDark' },
};

export const ButtonWrapper = styled.button<ButtonInterface>`
${(props: Props) =>
    props.buttonType &&
    css`
      background-color: ${props.theme.colors[colorMap[props.buttonType].bgColor]};
      color: ${colorMap[props.buttonType].textColor};
    `}  
`;

type ColorMapKeys='standard'|'accent'|'neutral'|'flat'|'text'|'disabled'；
类型ColorMap=记录；
常量颜色映射：颜色映射={
'standard'：{bgColor:'primaryNormal'，textColor:'white'}，
'accent'：{bgColor:'accentNormal'，textColor:'white'}，
'neutral'：{bgColor:'GrayerExtradark'，textColor:'white'}，
'flat'：{bgColor:'white'，textColor:'primaryNormal'}，
'text'：{bgColor:'white'，textColor:'grayerterdark'}，
'disabled'：{bgColor:'grayLight'，textColor:'graydurk'}，
};
export const ButtonWrapper=styled.button`
${（道具：道具）=>
道具.钮扣&&
css`
背景色：${props.theme.colors[colorMap[props.buttonType].bgColor]}；
颜色：${colorMap[props.buttonType].textColor}；
`}  
`;

---

现在一切都会好起来的

谢谢你的推荐，但这并不能解决问题。很抱歉，答案令人困惑。我已经更新了。如果答案不能解决您的问题，请告诉我，如果可以，请批准。