React集成Tiptap路由跳转触发removeChild错误的排查求助

错误原因 #

路由从/editor跳转到/时，Editor组件被卸载，但Tiptap的BubbleMenu/FloatingMenu依赖的tippy tooltip实例仍在尝试操作已被移除的DOM节点，导致Failed to execute 'removeChild' on 'Node'错误。本质是组件卸载时，编辑器及关联的菜单实例未被正确清理，残留的DOM操作引发冲突。

修复方法 #

在Editor组件中添加清理逻辑，确保组件卸载时销毁Tiptap编辑器实例，这样所有关联的菜单（BubbleMenu、FloatingMenu）会被自动清理，避免残留的DOM操作。

修改Editor/index.tsx代码如下：

import React, { useEffect } from 'react'
import './editor.scss'
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import 'remixicon/fonts/remixicon.css'
import BubbleMenu from '@/components/Editor/BubbleMenu.tsx'
import FloatingMenu from '@/components/Editor/FloatingMenu.tsx'

const Editor: React.FC = () => {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '',
  })

  // 组件卸载时销毁编辑器实例
  useEffect(() => {
    return () => {
      editor?.destroy()
    }
  }, [editor])

  return (
    <>
      {editor && <BubbleMenu editor={editor} />}
      {editor && <FloatingMenu editor={editor} />}
      <div className={'editor-content'}>
        <EditorContent editor={editor} />
      </div>
    </>
  )
}

export default Editor

补充说明 #

• Tiptap的editor.destroy()方法会自动清理所有关联的扩展、菜单实例及绑定的DOM事件，从根源避免卸载后的DOM操作冲突。
• 若仍存在问题，可以检查FloatingMenu组件是否有类似的未清理逻辑，确保所有和编辑器关联的组件都随编辑器销毁而停止操作。

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