更新react-bootstrap后Next.js+TS中Form组件类型错误求助

更新react-bootstrap后，TypeScript编写的Next.js应用出现类型错误：'Form' cannot be used as a JSX component. Its return type 'ReactNode' is not a valid JSX element

依赖版本 #

react-bootstrap: ^2.10.3
@types/react-bootstrap: ^0.32.36
react: ^18.2.0
react-dom: ^18.2.0
typescript: 5.0.2
@types/react: ^18.2.30
@types/react-dom: ^18.2.14

tsconfig.json配置 #

{
    "compilerOptions": {
        "target": "es6",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "react-jsx",
        "incremental": true,
        "baseUrl": ".",
        "paths": {
            "@/*": ["./*"]
        }
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types/**/*.d.ts"],
    "exclude": ["node_modules"]
}

已尝试步骤 #

• 验证所有依赖已更新且兼容
• 删除并重装node_modules和package-lock.json
• 查看react-bootstrap变更日志寻找破坏性更新

问题组件代码 #

import React, { useState, useEffect } from 'react';
import { Form, Button, Container } from 'react-bootstrap';
import Swal from 'sweetalert2';
import PromotersTable from './PromotersTable';
import usePromoterContract from '../customHooks/usePromoterManagement';
import { PromoterModel } from '../types';

const AddPromoterForm: React.FC = () => {
    const { addPromoter, getPromoters } = usePromoterContract();
    const [promoterAddress, setPromoterAddress] = useState('');
    const [email, setEmail] = useState('');
    const [isActive, setIsActive] = useState(true);
    const [promoters, setPromoters] = useState<PromoterModel[]>([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        const fetchPromoters = async () => {
            try {
                const result = await getPromoters();
                const promotersData: PromoterModel[] = result.map((item: any) => ({
                    promoterAddress: item.promoterAddress,
                    isActive: item.isActive,
                    percentage: item.percentage,
                    profit: item.profit,
                    referralCode: item.referralCode,
                }));
                setPromoters(promotersData);
            } catch (error) {
                console.error('Error fetching promoters:', error);
            }
        };

        fetchPromoters();
    }, [getPromoters]);

    const validateEmail = (email: string): boolean => {
        const re = /\S+@\S+\.\S+/;
        return re.test(email);
    };

    const handleAddPromoter = async (event: React.FormEvent) => {
        event.preventDefault();

        if (!validateEmail(email)) {
            Swal.fire({ title: 'Invalid Email!', icon: 'error' });
            return;
        }

        setLoading(true);
        try {
            console.log('handleAddPromoter - addPromoter - start');
            await addPromoter(promoterAddress, email);
            resetForm();
            console.log('handleAddPromoter - addPromoter - end');
        } catch (error: any) {
            console.log('🚀 ~ handleAddPromoter ~ error:', error);
        } finally {
            setLoading(false);
        }
    };

    const resetForm = () => {
        setPromoterAddress('');
        setEmail('');
        setIsActive(true);
    };

    return (
        <Container>
            <h2>Create Promoter</h2>
            <Form onSubmit={handleAddPromoter}>
                <Form.Group controlId="formPromoterAddress">
                    <Form.Label>Promoter Address</Form.Label>
                    <Form.Control
                        type="text"
                        placeholder="Enter promoter's address"
                        value={promoterAddress}
                        onChange={e => setPromoterAddress(e.target.value)}
                        required
                    />
                </Form.Group>
                <Form.Group controlId="formEmail">
                    <Form.Label>Email</Form.Label>
                    <Form.Control
                        type="email"
                        placeholder="Enter promoter's email"
                        value={email}
                        onChange={e => setEmail(e.target.value)}
                        required
                    />
                </Form.Group>
                <Form.Group controlId="formIsActive">
                    <Form.Check
                        type="checkbox"
                        label="Active"
                        checked={isActive}
                        onChange={e => setIsActive(e.target.checked)}
                    />
                </Form.Group>
                <div className="my-4 mx-auto text-center col-12">
                    <Button variant="primary" type="submit" size="sm" disabled={loading} className="w-100">
                        {loading ? 'Loading...' : 'Add Promoter'}
                    </Button>
                </div>
            </Form>
            <div className="h-50 overflow-y-auto">
                <PromotersTable promoters={promoters} />
            </div>
        </Container>
    );
};

export default AddPromoterForm;

这个问题的核心是**@types/react-bootstrap版本与react-bootstrap版本完全不兼容**：你用的是react-bootstrap v2.x，但@types/react-bootstrap@0.32.36是针对v0.32.x的旧类型定义，完全匹配不上v2的组件结构。

解决步骤：

1. 卸载旧的类型包
   执行命令：

npm uninstall @types/react-bootstrap
# 用yarn的话执行：yarn remove @types/react-bootstrap

react-bootstrap从v1.0.0开始就内置了TypeScript类型，不需要单独安装@types包。

2. 清理依赖并重装
   如果卸载后仍有问题，执行以下操作：

rm -rf node_modules package-lock.json
npm install

3. 确认tsconfig配置
   确保tsconfig.json中skipLibCheck为true（你当前已经开启），这能跳过第三方库的类型严格检查，避免边缘冲突。

完成以上操作后，Form组件的类型错误应该会消失。

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