类型错误：类型 'string[]' 不能用作索引类型答案

【问题标题】：Type error: Type 'string[]' cannot be used as an index type类型错误：类型 'string[]' 不能用作索引类型
【发布时间】：2021-12-16 10:41:53
【问题描述】：

这里有什么问题：

let organization = organizationList2[context.params?.organizationId];

Failed to compile.

./pages/[lang]/designer/[organizationId].tsx:337:40
Type error: Type 'string[]' cannot be used as an index type.

  335 |   });
  336 |   let organizationList2 = await organizationList2Data.json();

> 337 |   let organization = organizationList2[context.params?.organizationId];

奇怪为什么rganization 是undefined。

organizationList2 {
  'EC763372-277D-46B9-AD87-F45519E7D606': {
    name: 'TADA moment',
    events: { 'tada-moment-asztalivaza': [Object] }
  },
  'E8495FF0-B2DB-439A-98AA-873843635D3A': {
    name: 'Olovka Stúdió',
    events: { 'olovka-studio-peyote-gyuru': [Object] }
  },
  'AAE00290-39D6-4F32-A2FB-208F054B24AE': {
    events: { 'zer-jewel-rez-gyertyatarto': [Object] },
    name: 'Zer Jewel'
  },
  '637F7B7D-DD4E-4FE5-944E-99628187D8C2': {
    events: { 'yo-self-szinezz-textilmintat': [Object] },
    name: 'Yo Self'
  },
  '5E6A24C0-6E5B-4F53-BCFB-1D08254BD630': {
    name: 'Bognár Angéla',
    events: { 'bognar-angela-bortaska': [Object] }
  },
  '49350609-A83F-41AB-9CC1-A482D52AF2F5': {
    userRating: '4.6',
    socialNetworkContact: '',
    shopPhysicalLocation: '',
    name: 'Repityke',
    events: { 'repityke-origami-penztarca': [Object] }
  },
  '63DCAEF9-2A26-4FDF-BACA-921339E62450': {
    events: { 'kredenc-muterem-betonlampa': [Object] },
    name: 'Kredenc Műterem'
  },
  '7181FDC7-A58E-45B1-A377-A21E4C62442C': {
    userRating: '4.5',
    socialNetworkContact: 'instagram/kutasibeata',
    shopPhysicalLocation: 'Szeghalom, Magyarország',
    designerIntroduction: 'Kutasi Beáta vagyok, bőrtárgy-tervező iparművész.  2011-ben alapítottam saját műhelyt, ahol egyedi tervezésű táskák és kiegészítők kivitelezésével foglalkozom.  A minőségi, természetes alapanyagokat kedvelem, a tárgyaim elkészítésénél a bőrt szívesen kombinálom pamut zsinórfonallal, gyapjúfilccel, fával. Törekszem a tradícionális kézműves technikák életben tartására. Célom, hogy táskáim olyan emberekre találjanak, akik ragaszkodnak a kiválasztottjukhoz és sokáig használják azokat.',
    name: 'Kutasi Beáta',
    events: { 'kutasi-beata-horgolt-valltaska': [Object] }
  }
}
context.params?.organizationId 7181fdc7-a58e-45b1-a377-a21e4c62442c
oraganization undefined

和organizationId:

let organizationId: string = context.params?.organizationId as string;

以及整个方法：

export const getStaticProps: GetStaticProps = async ({ ...context }) => {
  let organizationList2Data = await fetch(`${baseURL}getSMOrganizations`, {
    method: "post",
    headers: { "Content-Type": "application/json" },
  });
  let organizationList2 = await organizationList2Data.json();
  let organization = organizationList2[context.params?.organizationId];
  console.log("organizationList2", organizationList2);
  console.log("context.params?.organizationId", context.params?.organizationId);
  console.log("oraganization", organization);
  let zz = Object.keys(organizationList2);
  console.log("zz", zz);
  let organizationId: string = context.params?.organizationId as string;
  return {
    props: {
      organizationId: context.params?.organizationId,
      organization: organization ?? "",
    },
    revalidate: 600,
  };
};

【问题讨论】：

那么organizationId 的值是多少？它来自哪里？
这是Next.js中的getStaticProps方法，来自外部。
如果你有let organizationId 行，你为什么不做let organization = organizationList2[organizationId];
嗯，你得到的类型错误表明它是一个 array 字符串，所以要么它不是你认为的那样，要么 TypeScript 坏了。
所以你的问题是context.params?.organizationId 可以是string，或者strings 的数组，或者undefined，由于nextjs 的类型。您需要先考虑每种可能性，然后再用它来索引objectName。如果是string[] 或undefined，你会怎么做？如果没有minimal reproducible example 在像The TypeScript Playground (link here) 这样的独立IDE 中演示该问题，就我个人而言，我不想尝试回答这个问题。如果您知道它是string，那么您可以像以前一样使用as string，但如果您犯了错误，那么您就会遇到运行时错误。

标签： javascript typescript next.js

【解决方案1】：

这是因为context.params?.organizationId 即“7181fdc7-a58e-45b1-a377-a21e4c62442c”是小写字母，而organizationList2 键是大写字母

只是做

let organization = organizationList2[context.params?.organizationId?.toUpperCase()];

【讨论】：

他有一个编译器错误。
这很明显。 console.log("7181fdc7-a58e-45b1-a377-a21e4c62442c" === "7181FDC7-A58E-45B1-A377-A21E4C62442C") 将打印错误。试试看吧
也许可以，但这会导致运行时错误，他甚至无法编译代码。
那么也许stackoverflow.com/q/57086672/7178860可以提供帮助