React中使用memo的TS组件出现_ref隐式any类型错误求助

问题概述 #

在React+TypeScript项目中，使用memo封装组件后编译报错，提示TS7006: Parameter '_ref' implicitly has an 'any' type.，但代码中并未显式定义_ref参数。排查后发现问题根源是webpack配置中添加了{ test: /\.tsx?$/, loader: "babel-loader" }，属于Babel与TypeScript配合的配置冲突问题。

代码示例 #

组件代码（BuildingBlock.tsx） #

// Dependencies
import React, { memo } from 'react';

// Props
interface BuildingBlockProps {
  id: number,
  top: number,
  left: number
}

const BuildingBlock: React.FC<BuildingBlockProps> = ({id, top, left}: BuildingBlockProps) => {
  return (
    <React.Fragment>
      <div
        id={`building-block-${id + 1}`}
        className="absolute w-12 h-12 bg-red-500 rounded-full"
        style={{ top: top + '%', left: left + '%' }}
      />
    </React.Fragment>
  );
};

// Export memoized component
const _BuildingBlock = memo(BuildingBlock);
export default _BuildingBlock;

页面代码（TestPage.tsx） #

import React from 'react';

import _BuildingBlock from '../components/atoms/BuildingBlock';

const TestPage = () => {
  return (
    <div>
      <_BuildingBlock id={1} top={2} left={3}/>
    </div>
  );
};

export default TestPage;

完整报错信息 #

./src/components/atoms/BuildingBlock.tsx 8:43-47 [tsl] ERROR in C:\Users\liam_\Desktop\Business\Nixon-Digital\Website\nixon-digital\client\src\components\atoms\BuildingBlock.tsx(8,44) TS7006: Parameter '_ref' implicitly has an 'any' type. ts-loader-default_e3b0c44298fc1c14 @ ./src/pages/TestPage.tsx 2:0-63 4:92-106 @ ./src/index.tsx 11:0-40 29:47-55 webpack 5.75.0 compiled with 1 error in 6817 ms

报错指向BuildingBlockProps接口的id: number,行末尾，无直接关联逻辑。

修复方案 #

1. 安装必要Babel依赖 #

确保项目已安装Babel处理TS和React的核心预设：

npm install @babel/core @babel/preset-react @babel/preset-typescript babel-loader --save-dev

2. 配置Babel支持TypeScript #

在项目根目录创建babel.config.json（或.babelrc），添加以下配置：

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

3. 调整Webpack配置 #

方案A：同时使用ts-loader和babel-loader

用ts-loader负责类型检查，babel-loader负责代码转译，webpack rules配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          'babel-loader',
          'ts-loader'
        ],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
};

方案B：单独使用babel-loader（关闭TS代码生成）

如果仅用babel-loader处理，需修改tsconfig.json，让TypeScript只做类型检查：

{
  "compilerOptions": {
    "noEmit": true,
    "jsx": "react-jsx",
    // 保留其他原有配置
  }
}

对应的webpack rules保持{ test: /\.tsx?$/, loader: "babel-loader", exclude: /node_modules/ }即可。

4. 额外检查项 #

• 确认tsconfig.json中jsx配置与React版本匹配（React 17+推荐"jsx": "react-jsx"）
• 保证@babel/preset-typescript版本与项目中TypeScript版本兼容

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