NextJS+TypeScript中使用FontAwesomeIcon出现defaultProps警告的解决方法

1. 升级FontAwesome相关依赖（推荐） #

这个警告的根源是旧版@fortawesome/react-fontawesome组件使用了将被废弃的defaultProps语法，新版本已经改用JavaScript默认参数修复了该问题。执行以下命令升级到最新稳定版：

npm update @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
# 若使用yarn
yarn upgrade @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
# 若使用pnpm
pnpm update @fortawesome/react-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

2. 移除不必要的类型断言 #

升级后，FontAwesome的TypeScript类型定义已完善，不需要再用as any强制转换图标类型，直接正常使用即可：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheck } from '@fortawesome/free-solid-svg-icons';

// 正确用法，无类型断言
<FontAwesomeIcon icon={faCheck} />

3. 临时抑制警告（仅应急使用） #

如果暂时无法升级依赖，可以通过以下方式临时屏蔽警告：

• 单个文件屏蔽：在导入FontAwesomeIcon的文件顶部添加注释忽略TS警告：

  // @ts-ignore
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  

• NextJS全局配置：在next.config.js中添加webpack规则，处理FontAwesome组件的编译：

  module.exports = {
    webpack: (config) => {
      config.module.rules.push({
        test: /node_modules\/@fortawesome\/react-fontawesome\/.*\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@babel/plugin-transform-react-jsx'],
          },
        },
      });
      return config;
    },
  };
  

内容的提问来源于stack exchange，提问作者タインズン