PlateJS新手使用Fixed Toolbar遇<Tooltip>组件错误求助

开发者阿泽

2026-6-27

问题描述

我是PlateJS新手，参照官方文档的Fixed Toolbar组件教程开发，编写对应代码后运行出现<Tooltip>组件相关错误。移除代码中的<FixedToolbar>及<FixedToolbarButtons>代码块后，错误消失但工具栏无法显示，确定问题源于该代码块，求助原因及解决方法。

代码示例

import { Plate, PlateContent } from '@udecode/plate-common';

import { Editor } from '@/components/plate-ui/editor';

import React, { useRef } from 'react';
import { cn } from '@udecode/cn';
import { CommentsProvider } from '@udecode/plate-comments';
import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
 
// import { commentsUsers, myUserId } from '@/lib/plate/comments';
const commentsUsers = {
    1: {
      id: '1',
      name: 'zbeyens',
      avatarUrl: 'https://avatars.githubusercontent.com/u/19695832?s=96&v=4',
    },
  };
   
const myUserId = '1';

import { MENTIONABLES } from '@/lib/plate/mentionables';
import { plugins } from '@/lib/plate/plugins';
import { CommentsPopover } from '@/components/plate-ui/comments-popover';
import { CursorOverlay } from '@/components/plate-ui/cursor-overlay';
import { FixedToolbar } from '@/components/plate-ui/fixed-toolbar';
import { FixedToolbarButtons } from '@/components/plate-ui/fixed-toolbar-buttons';
import { FloatingToolbar } from '@/components/plate-ui/floating-toolbar';
import { FloatingToolbarButtons } from '@/components/plate-ui/floating-toolbar-buttons';
import { MentionCombobox } from '@/components/plate-ui/mention-combobox';

export function CreateProject(){
    const containerRef = useRef(null);

    const initialValue = [
        {
          id: '1',
          type: ELEMENT_PARAGRAPH,
          children: [{ text: 'Hello, World!' }],
        },
    ];

    return (
        <div className='h-screen w-1/2 mx-auto mt-20 bg-slate-50'>
            <DndProvider backend={HTML5Backend}>
                <CommentsProvider users={commentsUsers} myUserId={myUserId}>
                    <Plate 
                        plugins={plugins}
                        initialValue={initialValue}
                    >
                        <div
                            ref={containerRef}
                            className={cn(
                                'relative',
                                // Block selection
                                '[&_.slate-start-area-left]:!w-[64px] [&_.slate-start-area-right]:!w-[64px] [&_.slate-start-area-top]:!h-4'
                            )}
                        >
                            <FixedToolbar>
                                <FixedToolbarButtons />
                            </FixedToolbar>

                            <Editor 
                                className="px-[96px] py-16"
                                autoFocus
                                focusRing={false}
                                variant="ghost"
                                size="md"
                            />

                            <FloatingToolbar>
                                <FloatingToolbarButtons />
                            </FloatingToolbar>

                            <MentionCombobox items={MENTIONABLES} />

                            <CommentsPopover />

                            <CursorOverlay containerRef={containerRef} />
                        </div>
                    </Plate>
                </CommentsProvider>
            </DndProvider>
        </div>
    )
}

错误信息

上述错误发生在以下组件中：

at $a093c7e1ec25a057$export$28c660c63b792dea (http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-tooltip.js?v=32a51597:116:11)
at ExtendComponent (http://localhost:5173/src/components/plate-ui/tooltip.tsx:35:32)
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:69:11)
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:46:11)
at http://localhost:5173/node_modules/.vite/deps/chunk-CNAETF6X.js?v=32a51597:38:13)
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:69:11)
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:46:11)
at http://localhost:5173/node_modules/.vite/deps/chunk-CNAETF6X.js?v=32a51597:38:13)
at http://localhost:5173/node_modules/.vite/deps/chunk-ZEXNATZL.js?v=32a51597:629:11)
at http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js?v=32a51597:170:11)
at http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js?v=32a51597:1020:11)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15)
at $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9 (http://localhost:5173/node_modules/.vite/deps/chunk-ZEXNATZL.js?v=32a51597:616:11)
at $6cc32821e9371a1c$export$d9b273488cd8ce6f (http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js?v=32a51597:112:11)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15)
at $d08ef79370b62062$export$e44a253a59704894 (http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-dropdown-menu.js?v=32a51597:984:11)
at InsertDropdownMenu (http://localhost:5173/src/components/plate-ui/insert-dropdown-menu.tsx:142:18)
at div
at div
at _c6 (http://localhost:5173/src/components/plate-ui/toolbar.tsx:164:46)
at div
at div
at FixedToolbarButtons (http://localhost:5173/src/components/plate-ui/fixed-toolbar-buttons.tsx:34:20)
at div
at http://localhost:5173/node_modules/.vite/deps/chunk-CNAETF6X.js?v=32a51597:38:13)
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:69:11)
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:46:11)
at http://localhost:5173/node_modules/.vite/deps/chunk-CNAETF6X.js?v=32a51597:38:13)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15)
at http://localhost:5173/node_modules/.vite/deps/chunk-2EGUBRDI.js?v=32a51597:54:11)
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:69:11)
at http://localhost:5173/node_modules/.vite/deps/chunk-77W7KSQV.js?v=32a51597:46:11)
at http://localhost:5173/node_modules/.vite/deps/chunk-N4QM573P.js?v=32a51597:41:13)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15)
at CollectionProvider (http://localhost:5173/node_modules/.vite/deps/chunk-N4QM573P.js?v=32a51597:27:13)
at http://localhost:5173/node_modules/.vite/deps/chunk-2EGUBRDI.js?v=32a51597:43:18)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-PGH5UBMJ.js?v=32a51597:20:15)
at http://localhost:5173/node_modules/.vite/deps/@radix-ui_react-toolbar.js?v=32a51597:245:11)
at ExtendComponent (http://localhost:5173/node_modules/.vite/deps/@udecode_cn.js?v=32a51597:81:17)
at ExtendComponent (http://localhost:5173/node_modules/.vite/deps/@udecode_cn.js?v=32a51597:81:17)
at div
at PlateEffects (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:23561:18)
at HydrateAtoms (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5897:5)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5583:3)
at http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5918:20)
at PlateInner (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:23566:26)
at Plate (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:23645:15)
at HydrateAtoms (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5897:5)
at Provider (http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5583:3)
at http://localhost:5173/node_modules/.vite/deps/chunk-Y3TOVENN.js?v=32a51597:5918:20)
at DndProvider2 (http://localhost:5173/node_modules/.vite/deps/react-dnd.js?v=32a51597:1527:9)
at div
at CreateProject (http://localhost:5173/src/components/CreateProject.tsx?t=1710700427274:45:24)
at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/chunk-GIMIJEAX.js?v=32a51597:3548:5)
at Routes (http://localhost:5173/node_modules/.vite/deps/chunk-GIMIJEAX.js?v=32a51597:3983:5)
at Router (http://localhost:5173/node_modules/.vite/deps/chunk-GIMIJEAX.js?v=32a51597:3926:15)
at BrowserRouter (http://localhost:5173/node_modules/.vite/deps/chunk-GIMIJEAX.js?v=32a51597:4666:5)
at ThemeProvider (http://localhost:5173/src/components/theme-provider.tsx:27:3)
at App

建议在组件树中添加错误边界以自定义错误处理行为。

解决方案

检查自定义Tooltip组件实现：错误栈明确指向src/components/plate-ui/tooltip.tsx第35行，说明该自定义组件存在问题。确认是否正确遵循Radix UI Tooltip的使用规范，比如是否完整使用了Tooltip.Root、Tooltip.Trigger、Tooltip.Content的组件结构，是否传递了必需的props。
验证依赖版本兼容性：确保@radix-ui/react-tooltip版本与PlateJS依赖的版本匹配，版本不匹配可能导致API差异引发错误。尝试重新安装依赖：
```
npm install @radix-ui/react-tooltip
```
排查FixedToolbarButtons内部组件：错误路径显示问题出在InsertDropdownMenu调用Tooltip的环节，需要检查该组件中Tooltip的使用是否正确，比如是否遗漏了必要的Provider或者props传递错误。

添加Tooltip Provider：Radix UI的Tooltip组件需要在TooltipProvider的包裹下使用，若项目中未添加，需在Plate组件外层或根组件中引入：

import { TooltipProvider } from '@radix-ui/react-tooltip';

// 修改CreateProject组件的返回结构
return (
  <div className='h-screen w-1/2 mx-auto mt-20 bg-slate-50'>
      <DndProvider backend={HTML5Backend}>
          <CommentsProvider users={commentsUsers} myUserId={myUserId}>
              <TooltipProvider>
                  <Plate 
                      plugins={plugins}
                      initialValue={initialValue}
                  >
                      {/* 原有内容 */}
                  </Plate>
              </TooltipProvider>
          </CommentsProvider>
      </DndProvider>
  </div>
)

简化测试定位问题：暂时替换FixedToolbarButtons为简单按钮，排除内部复杂组件的影响：
```
<FixedToolbar>
  <button onClick={() => console.log('工具栏测试')}>测试按钮</button>
</FixedToolbar>
```
若此方式能正常运行，说明问题出在FixedToolbarButtons内部组件，需要逐步排查其中的InsertDropdownMenu等子组件。

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

PlateJS新手使用Fixed Toolbar遇<Tooltip>组件错误求助

问题描述 #

代码示例 #

错误信息 #

解决方案 #

问题描述

代码示例

错误信息

解决方案