React-Bootstrap+TypeScript：使用fill/justify属性触发类型错误

问题描述 #

使用React-Bootstrap结合TypeScript开发时，给Tabs组件添加fill或justify布尔属性后，出现TS2322类型不匹配编译错误，尽管页面可以正常运行，但编译阶段会抛出错误，而React-Bootstrap官方文档明确推荐该用法。

相关代码 #

import { useCallback, useState, useEffect } from 'react';
import { Tabs, Tab, Spinner, Alert } from 'react-bootstrap';

import { Categories } from '../../models/ICategory';
import IMovie from '../../models/IMovie';
import { getMovies } from '../../services/movies';
import Movies from '../Movies/index';


export default function Landing() {
    const [favourites, setFavourites] = useState<IMovie[]>([]);
    const [loading, setLoading] = useState<boolean>(true);
    const [error, setError] = useState<Error | null>(null);

    const fetchFavourites = useCallback(async () => {
        try {
            const favourites = await getMovies(Categories.Favourite);
            setFavourites( favourites );
        } catch (error) {
            setError( error as Error);
        } finally {
            setLoading(false);
        }
    }, []);

    useEffect(() => {
        fetchFavourites();
    }, [fetchFavourites]);

    if(loading) {
        return (
            <Spinner animation="border" role="status">
                <span className="visually-hidden">Loading...</span>
            </Spinner>
        )
    }

    if(!loading && error) {
        return (
            <Alert variant="danger">{error.message}</Alert>
        );
    }
    

    return (
        <Tabs
            defaultActiveKey={Categories.MoviesComing}
            id='landing-page-tab'
            className='mb-3 px-3'
            fill
        >
            <Tab eventKey={Categories.MoviesComing} title='Coming Soon'>
                <Movies category={Categories.MoviesComing} favourites={favourites} setFavourites={setFavourites} />
            </Tab>
            <Tab eventKey={Categories.MoviesInTheaters} title='In Theatres'>
                <Movies category={Categories.MoviesInTheaters} favourites={favourites} setFavourites={setFavourites} />
            </Tab>
            <Tab eventKey={Categories.TopRatedIndia} title='Top Rated In India'>
                <Movies category={Categories.TopRatedIndia} favourites={favourites} setFavourites={setFavourites} />
            </Tab>
            <Tab eventKey={Categories.TopRatedMovies} title='Top Rated'>
                <Movies category={Categories.TopRatedMovies} favourites={favourites} setFavourites={setFavourites} />
            </Tab>
            <Tab eventKey={Categories.Favourite} title='Favourites'>
                <Movies category={Categories.Favourite} favourites={favourites} setFavourites={setFavourites} />
            </Tab>
        </Tabs>
    )
}

错误信息 #

ERROR in src/components/Landing/index.tsx:50:13 TS2322: Type '{ children: Element[]; defaultActiveKey: Categories; id: string; className: string; fill: true; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<TabsProps, "slot" | "style" | "title" | "variant" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 252 more ... |  Compiled with warnings.

解决方法 #

• 确保React-Bootstrap与类型定义包版本匹配
  类型定义包@types/react-bootstrap可能滞后于react-bootstrap主包版本，导致属性未被类型识别。执行以下命令更新到最新匹配版本：

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

• 手动扩展TabsProps类型（临时兼容方案）
  如果版本更新后问题仍存在，可以手动扩展Tabs的属性类型：

  import { TabsProps } from 'react-bootstrap';
  
  // 扩展接口，添加缺失的fill和justify属性
  interface ExtendedTabsProps extends TabsProps {
    fill?: boolean;
    justify?: boolean;
  }
  

  然后在使用Tabs时断言类型：

  <Tabs
    defaultActiveKey={Categories.MoviesComing}
    id='landing-page-tab'
    className='mb-3 px-3'
    fill
    as={ExtendedTabsProps}
  >
    {/* Tab内容 */}
  </Tabs>
  

• 清理TypeScript缓存并重启编译
  有时TypeScript缓存会导致类型识别异常，执行以下命令清理缓存后重新编译：

  npx tsc --clean
  # 或重启你的IDE（如VS Code），并重新执行编译命令
  

• 检查属性传递格式
  确认fill/justify是作为布尔属性传递（即直接写fill而非fill="true"），你的代码中格式是正确的，但如果有拼写错误也会导致类型错误，需仔细检查。

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