如何在Next.js页面切换时移除OneSignal初始化生成的通知组件实例

问题原因 #

OneSignal的通知铃铛属于全局挂载的DOM元素，直接绑定在document.body节点下，不属于当前页面组件的内部DOM结构。Next.js客户端路由跳转不会触发页面重载，因此组件卸载时不会自动清除该全局DOM，导致铃铛在其他页面残留。

解决方案 #

在componentWillUnmount生命周期中执行两步操作：调用OneSignal官方API隐藏通知按钮，同时手动清理残留的全局DOM节点，必要时重置全局OneSignal实例，代码如下：

componentWillUnmount() {
  OneSignal.push(function () {
    // 调用官方提供的方法隐藏通知铃铛
    OneSignal.notifyButton.hide();
    // 批量移除所有OneSignal生成的全局DOM节点
    const oneSignalDomList = document.querySelectorAll(
      "#onesignal-notification-bell, .onesignal-bell-container, .onesignal-slidedown-container"
    );
    oneSignalDomList.forEach((dom) => dom.remove());
    // 可选：完全销毁全局OneSignal实例，下次进入页面重新初始化
    delete window.OneSignal;
  });
}

适配不同写法的补充说明 #

• 如果你使用的是函数组件，将上述清理逻辑放到useEffect的返回清理函数中即可，逻辑完全一致。
• 如果你使用的是Next.js 13+ App Router，可以通过监听路径变化，在离开目标页面时触发上述清理逻辑。
• 所有OneSignal相关操作都要放到OneSignal.push的回调中执行，避免SDK未加载完成时报错。

修改完成后即可实现路由跳转时铃铛自动清理，无需手动刷新页面。

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