React TS访问对象属性报Module parse failed: Unexpected token错

你遇到的是编译阶段语法解析错误，和后端接口返回、业务逻辑无关：Webpack打包时无法识别代码里的?.（可选链操作符，ES2020新增语法），当前项目的转译配置（Babel/TypeScript）默认不支持该语法，直接抛出解析失败错误。
等编译问题解决后，你还会遇到接口字段不匹配导致的运行时取值问题，以下是完整修复步骤： #

修复步骤 #

1. 解决可选链语法编译报错 #

根据项目搭建方式选对应方案：

• 如果你用Create React App脚手架创建项目、未手动修改Webpack配置：
  报错原因是react-scripts版本过低（3.3之前的版本默认不支持可选链语法），直接升级依赖即可：

  # npm用户执行
  npm install react-scripts@latest typescript@latest --save-dev
  # yarn用户执行
  yarn upgrade react-scripts@latest typescript@latest
  

  升级完成后重启开发服务即可。
• 如果你是手动搭建Webpack+React项目，或已经执行eject弹出了内置配置：
  需要安装Babel对应语法转译插件：
  1. 安装依赖

  npm install --save-dev @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator typescript@latest
  

  2. 在项目根目录的Babel配置文件（.babelrc/babel.config.js）中添加插件声明：

  {
    "plugins": [
      "@babel/plugin-proposal-optional-chaining",
      "@babel/plugin-proposal-nullish-coalescing-operator"
    ]
  }
  

  重启开发服务后编译报错会消失。

2. 修复TS接口和后端返回字段不匹配问题 #

编译通过后你会遇到取值undefined的问题，因为当前定义的Game接口和后端实际返回字段有两处不一致：

• 后端返回的评分数组字段名为bewertungen，接口中错写为ratings
• 后端返回的date是字符串格式，接口中错定义为Date类型
  修正后的接口代码如下：

export interface Game {
    id: string;
    name: string;
    date: string; // 后端返回ISO格式日期字符串，需要Date对象可在拿到数据后手动转换
    entwickler: string;
    bewertungen: Rating[]; // 和后端返回字段名对齐
}

interface Rating {
    gewichtung: number;
    comment: string;
}

可选优化 #

当前请求代码混用了async/await和.then链式调用，写法冗余且异常分支没有重置loading状态，容易出现页面永久加载的问题，可优化为统一写法：

const fetchGameData = async (url: string) => {
    try {
        const response = await axios.get(url);
        console.log(response.data);
        setGame(response.data);
    } catch (error) {
        console.log("Something bad happend: " + error);
    } finally {
        setIsLoading(false); // 无论请求成功失败都重置加载状态
    }
}

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