React+TypeScript从API加载数据时出现TS2339类型错误

问题根源是你给map回调里的language指定了错误的类型[]——TypeScript将其识别为空数组，自然找不到languageId和name这类对象属性。以下是具体修复方案：

1. 定义数据结构的TypeScript接口 #

先明确后端返回的语言对象结构，创建对应的接口：

// 单个语言对象的结构
interface Language {
  languageId: number; // 根据实际数据类型调整，比如字符串就写string
  name: string;
}

// 查询返回的整体数据结构
interface LanguagesData {
  languages: Language[];
}

2. 给useQuery指定泛型 #

让Apollo Client正确推断返回数据的类型：

const { loading, error, data } = useQuery<LanguagesData>(GET_LANGUAGES_QUERY);

3. 修正map回调的类型标注 #

把错误的[]替换为我们定义的Language接口，也可以直接省略类型（TypeScript会自动推断）：

{data.languages.map((language: Language) => (
  <li key={language.languageId}>
    {language.languageId} - {language.name}
  </li>
))}

完整修复后的代码 #

import React from 'react';
import { gql, useQuery } from '@apollo/client';

// 定义数据结构接口
interface Language {
  languageId: number;
  name: string;
}

interface LanguagesData {
  languages: Language[];
}

const GET_LANGUAGES_QUERY = gql`
  query Query {
    languages {
      languageId
      name
    }
  }
`;

export const LanguagesPage: React.FC = () => {
  // 指定泛型让TypeScript识别数据类型
  const { loading, error, data } = useQuery<LanguagesData>(GET_LANGUAGES_QUERY);

  if (error) return <p>获取数据出错</p>;
  if (loading) return <p>加载中</p>;
  console.log(data);

  return (
    <main>
      <div>当前语言: Tabla</div>
      <h3>你想学习哪种语言？</h3>
      <ul>
        {data.languages.map((language) => (
          <li key={language.languageId}>
            {language.languageId} - {language.name}
          </li>
        ))}
      </ul>
    </main>
  );
};

注：原代码中存在<ul>标签缺失开头的问题，修复后的代码已补上。

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