Next.js集成DropInBlog后导航时触发removeChild空指针运行时错误

问题原因 #

DropInBlog的脚本在Next.js客户端导航（通过Link组件跳转）时，页面组件已被卸载，但脚本仍尝试操作已被移除的#dib-posts DOM元素，从而触发TypeError: Cannot read properties of null (reading 'removeChild')错误。

解决方案 #

通过React的useEffect钩子精准控制DropInBlog脚本的加载与清理流程，确保页面卸载时彻底移除相关DOM和脚本实例：

import { useEffect } from 'react';

export default function Blog() {
  useEffect(() => {
    // 动态创建并加载DropInBlog脚本
    const script = document.createElement('script');
    script.src = 'your-dropin-blog-source';
    script.async = true;
    document.body.appendChild(script);

    // 组件卸载时执行清理操作
    return () => {
      // 移除已加载的脚本
      if (script.parentNode) {
        script.parentNode.removeChild(script);
      }
      // 清空目标容器，避免脚本操作不存在的DOM节点
      const dibContainer = document.getElementById('dib-posts');
      if (dibContainer) {
        dibContainer.innerHTML = '';
      }
      // 调用DropInBlog的全局销毁方法（若官方提供）
      if (window.DropInBlog?.destroy) {
        window.DropInBlog.destroy();
      }
    };
  }, []);

  return <div id="dib-posts"></div>;
}

关键说明 #

• 用动态加载脚本替代Next.js的Script组件，能更精准把控脚本的生命周期；
• 清理函数中必须移除脚本、清空目标容器，若DropInBlog提供全局销毁API，一定要调用，避免残留的事件监听或DOM操作代码继续运行；
• 若上述方法无效，可查阅DropInBlog官方文档，确认是否有针对单页应用（SPA）的适配方案，比如手动初始化/销毁实例。

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