开发Modal组件时遭遇TS2739错误排查求助

问题分析 #

这个错误源于TypeScript类型定义冲突或版本不匹配——错误提示里的placeholder、onPointerEnterCapture等属性并非Modal.Header所需，说明类型定义被错误混入了其他组件的props。大概率是react-bootstrap内置类型与单独安装的@types/react-bootstrap包冲突，或是依赖版本不兼容导致的。

解决方案 #

1. 移除冗余的类型包 #

新版react-bootstrap（v5及以上）已经自带TypeScript类型定义，无需单独安装@types/react-bootstrap，重复的类型包会引发冲突：

npm uninstall @types/react-bootstrap
# 或使用yarn
yarn remove @types/react-bootstrap

2. 同步依赖版本到兼容状态 #

更新react-bootstrap、react和react-dom到最新稳定版，保证版本适配：

npm install react-bootstrap@latest react@latest react-dom@latest
# 或使用yarn
yarn add react-bootstrap@latest react@latest react-dom@latest

3. 验证组件代码 #

你的组件逻辑本身没有问题，修复依赖后，以下代码可正常运行：

import { Modal } from 'react-bootstrap';
import styles from './style.module.scss';

interface WalletModalProps {
    show: boolean;
    handleClose: () => void;
}

const WalletModal = ({ show, handleClose }: WalletModalProps) => {
    return (
        <Modal show={show} onHide={handleClose} centered>
            <Modal.Header closeButton>
                <Modal.Title className={styles.walletModalTitle}>Let's add a new wallet</Modal.Title>
            </Modal.Header>
            {/* 可按需添加Modal.Body和Modal.Footer */}
        </Modal>
    );
};

export default WalletModal;

额外排查：检查tsconfig配置 #

如果上述步骤无效，确认tsconfig.json中strict模式开启（建议保持开启），同时types数组无多余配置：

{
  "compilerOptions": {
    "strict": true,
    "types": ["react", "react-dom"]
  }
}

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