Next.js应用关闭Popup时出现removeChild节点错误求助

这个NotFoundError本质是React尝试移除一个不在当前父DOM节点下的元素，结合你描述的「滚动到服务区域以下就正常」的现象，核心原因大概率是Popup的DOM元素被意外改变了父容器，或是Next.js SSR/CSR渲染不匹配导致的。下面是具体排查和解决步骤：

1. 检查Popup的挂载方式（重点排查Portal） #

如果你的popup.jsx用了ReactDOM.createPortal，一定要确认挂载的目标容器是始终存在的稳定节点：

• 错误示例：如果目标容器是动态生成/滚动时会被隐藏的元素（比如某个随滚动消失的区块），就会导致卸载时找不到父节点

// 避免这种写法
const target = document.getElementById('dynamic-scroll-container');
return ReactDOM.createPortal(<PopupContent />, target);

• 正确做法：直接挂载到document.body，确保父节点始终存在

import { createPortal } from 'react-dom';

export default function Popup() {
  return createPortal(
    <div className="popup">...</div>,
    document.body
  );
}

2. 移除手动DOM操作代码 #

检查index.jsx和popup.jsx里有没有手动移动/删除Popup DOM元素的逻辑（比如滚动监听里的appendChild/removeChild）：
比如这种代码会彻底脱离React的DOM管控：

// 要删掉这类手动DOM操作
window.addEventListener('scroll', () => {
  if (window.scrollY > 500) {
    document.getElementById('service-section').appendChild(document.getElementById('popup'));
  }
});

所有Popup的显示/位置控制都要交给React状态，不要直接操作DOM。

3. 修正Popup的卸载逻辑 #

如果popup.jsx里有手动清理DOM的useEffect回调，直接删掉：

// 错误写法：手动移除会让React找不到要卸载的节点
useEffect(() => {
  return () => {
    document.getElementById('popup').remove();
  };
}, []);

React会自动处理组件的卸载，不需要手动干预DOM。

4. 确保状态控制的一致性 #

用React状态严格控制Popup的渲染/卸载，不要用CSS样式（比如display: none）来隐藏：

// index.jsx里的正确写法
import { useState } from 'react';
import Popup from './popup';

export default function Home() {
  const [isPopupOpen, setIsPopupOpen] = useState(true);

  return (
    <div>
      {/* 只有状态为true时才渲染Popup，false时自动卸载 */}
      {isPopupOpen && <Popup onClose={() => setIsPopupOpen(false)} />}
    </div>
  );
}

5. 标记Popup为客户端组件 #

如果你的项目用了Next.js 13+的App Router，在popup.jsx顶部加上'use client'，避免SSR渲染带来的DOM不匹配：

'use client'; // 顶部加上这个标记，确保只在客户端渲染

import { createPortal } from 'react-dom';

export default function Popup({ onClose }) {
  // ...组件逻辑
}

排查顺序建议 #

1. 先检查是否用了Portal，换成挂载到document.body试下；
2. 搜索代码里所有手动操作DOM的appendChild/remove方法，全部删掉；
3. 确认Popup是通过React状态控制渲染，而非CSS隐藏；
4. 添加客户端组件标记（如果用了App Router）。

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