React+TypeScript中解构Props后设默认值出现undefined错误的原因

将TypeScript、ESLint、Prettier、React及WebStorm升级至最新版本后，出现此前未有的错误：在组件解构赋值Props时，给可选类型变量设置默认值后，编辑器提示该变量可能为undefined，但网页实际运行无异常。

package.json #

{
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/lab": "^5.0.0-alpha.141",
    "@mui/material": "^5.14.6",
    "axios": "^1.5.0",
    "mobx": "^6.10.0",
    "mobx-react-lite": "^4.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-refresh": "^0.14.0",
    "react-router-dom": "^6.15.0",
    "styled-components": "^6.0.7",
    "swagger-ui-react": "^5.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.22.11",
    "@babel/preset-env": "^7.22.10",
    "@babel/preset-react": "^7.22.5",
    "@babel/preset-typescript": "^7.22.11",
    "@svgr/webpack": "^8.1.0",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "@types/styled-components": "^5.1.26",
    "@types/swagger-ui-react": "^4.18.0",
    "@typescript-eslint/eslint-plugin": "^6.5.0",
    "@typescript-eslint/parser": "^5.33.1",
    "babel-loader": "^9.1.3",
    "babel-plugin-module-resolver": "^5.0.0",
    "clean-webpack-plugin": "^4.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^6.8.1",
    "dotenv-webpack": "^8.0.1",
    "eslint": "8.22.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^9.0.0",
    "eslint-import-resolver-typescript": "^3.6.0",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.3",
    "husky": "^8.0.3",
    "lint-staged": "^14.0.1",
    "mini-css-extract-plugin": "^2.7.6",
    "prettier": "^3.0.2",
    "source-map-loader": "^4.0.1",
    "style-loader": "^3.3.3",
    "ts-loader": "^9.4.4",
    "typescript": "^5.2.2",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

代码示例 #

import React from 'react';
import styled from 'styled-components';
import Radio from '@components/Radio';

interface Props {
  id: string;
  name: string;
  handleClick: (value: string) => void;
  label: string;
  isChecked?: boolean;
  style?: React.CSSProperties;
}

const Layout = styled.div`
  display: flex;
  justify-content: center;
`;

const Text = styled.label`
  line-height: 24px;
  margin-left: 6px;
`;

const RadioWithLabel = ({
  id,
  name,
  handleClick,
  label,
  isChecked = false,
  style,
}: Props) => (
  <Layout style={style}>
    <Radio
      id={id}
      name={name}
      handleClick={handleClick}
      isChecked={isChecked}
    />
    <Text htmlFor={id}>{label}</Text>
  </Layout>
);

export default RadioWithLabel;

错误提示 #

解决方法 #

• 对齐ESLint TypeScript相关依赖版本
  当前@typescript-eslint/parser（5.33.1）与@typescript-eslint/eslint-plugin（6.5.0）版本不匹配，这是导致类型检查误报的核心原因。执行以下命令升级解析器版本：

  npm install @typescript-eslint/parser@6.5.0 --save-dev
  

• 清理WebStorm缓存
  升级工具后编辑器缓存可能残留旧逻辑，通过File -> Invalidate Caches...选择"Invalidate and Restart"清理缓存并重启编辑器。

• TypeScript配置优化（可选）
  若上述操作后仍有提示，检查tsconfig.json，确保strictNullChecks配置与代码逻辑匹配，或显式标注解构后变量的类型：

  const RadioWithLabel = ({
    // ...其他props
    isChecked = false,
  }: Props): JSX.Element => {
    // 显式断言类型（仅在必要时使用）
    const checked = isChecked as boolean;
    // ...组件逻辑
  }
  

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