Next.js+React项目中复用React Bootstrap Tooltip组件报错求助

核心问题 #

1. OverlayTrigger未渲染子元素：你的TitleTooltip组件里，<OverlayTrigger>内部没有接收并渲染传入的子节点（即使用时的<p>Hover me</p>），React找不到触发Tooltip的目标元素，直接引发报错。
2. 缺失Bootstrap样式导入：仅安装依赖但未导入样式，会导致Tooltip组件功能异常。
3. Next.js SSR适配问题：部分React-Bootstrap组件在服务端渲染时可能出现hydration不匹配。

修复步骤 #

1. 修正Tooltip组件的子元素传递 #

修改Tooltip.js，在<OverlayTrigger>内部添加{children}，确保触发元素能被渲染：

import { OverlayTrigger, Tooltip } from 'react-bootstrap';

export default function TitleTooltip({ placement = 'top', title = '', children }) {
    return (
        <OverlayTrigger
            placement={placement}
            overlay={
                <Tooltip id={`tooltip-${placement}`}>
                    {title}
                </Tooltip>
            }
        >
            {children} {/* 必须渲染子元素作为Tooltip触发目标 */}
        </OverlayTrigger>
    )
}

2. 全局导入Bootstrap样式 #

在_app.js（或_app.tsx）中添加Bootstrap CSS的全局导入：

import 'bootstrap/dist/css/bootstrap.min.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

3. 解决SSR Hydration问题（可选） #

如果修复后仍有hydration报错，用Next.js的动态导入禁用该组件的SSR：

import dynamic from 'next/dynamic';

// 动态导入Tooltip组件，禁用服务端渲染
const TitleTooltip = dynamic(() => import('../tooltips/Tooltip'), { ssr: false });

export default function Testing(){
    return(
        <div>
            <TitleTooltip placement='top' title={'This is some text'}>
                <p>Hover me</p>
            </TitleTooltip>
        </div>
    )
}

验证 #

重启开发服务器后，hover触发元素，Tooltip应正常显示，报错消失。

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