登录时触发TypeError: Cannot read properties of null (reading 'removeEventListener')的原因？

这个错误的核心是当组件清理（比如登录后组件卸载或DOM元素被移除）时，document.querySelector(".navbar-toggler")返回了null，直接调用removeEventListener就触发了类型错误。登录操作可能导致导航栏按钮从DOM中消失，或者整个组件被卸载，此时清理函数里查找已不存在的元素自然拿不到结果。

方案1：添加空值检查，避免操作null对象 #

不管添加还是移除事件监听，先判断元素是否存在再执行操作，即使元素已不在DOM中也不会报错：

function menuToggler(){
  const collapseEl = document.querySelector(".offcanvas-collapse");
  if (collapseEl) {
    collapseEl.classList.toggle("open");
  }
}

useEffect(() => {
  AOS.init({
    duration: 1000,
    easing: "ease",
    once: true,
  });

  window.addEventListener("resize", setWindowsWidth);
  window.addEventListener("scroll", scrollFunction);
  
  const togglerEl = document.querySelector(".navbar-toggler");
  const collapseEl = document.querySelector(".offcanvas-collapse");
  if (togglerEl) {
    togglerEl.addEventListener("click", menuToggler);
  }
  if (collapseEl) {
    collapseEl.addEventListener("click", menuToggler);
  }

  return () => {
    window.removeEventListener("resize", setWindowsWidth);
    window.removeEventListener("scroll", scrollFunction);
    
    const togglerEl = document.querySelector(".navbar-toggler");
    const collapseEl = document.querySelector(".offcanvas-collapse");
    if (togglerEl) {
      togglerEl.removeEventListener("click", menuToggler);
    }
    if (collapseEl) {
      collapseEl.removeEventListener("click", menuToggler);
    }
  };
}, []);

方案2：用React Ref替代DOM查询（更推荐） #

React中不建议直接用document.querySelector操作DOM，使用Ref能精准获取组件内元素，避免元素不存在的问题：

import { useRef, useEffect } from 'react';

function YourAuthComponent() {
  const togglerRef = useRef(null);
  const collapseRef = useRef(null);

  function menuToggler(){
    if (collapseRef.current) {
      collapseRef.current.classList.toggle("open");
    }
  }

  useEffect(() => {
    AOS.init({
      duration: 1000,
      easing: "ease",
      once: true,
    });

    window.addEventListener("resize", setWindowsWidth);
    window.addEventListener("scroll", scrollFunction);
    
    if (togglerRef.current) {
      togglerRef.current.addEventListener("click", menuToggler);
    }
    if (collapseRef.current) {
      collapseRef.current.addEventListener("click", menuToggler);
    }

    return () => {
      window.removeEventListener("resize", setWindowsWidth);
      window.removeEventListener("scroll", scrollFunction);
      
      if (togglerRef.current) {
        togglerRef.current.removeEventListener("click", menuToggler);
      }
      if (collapseRef.current) {
        collapseRef.current.removeEventListener("click", menuToggler);
      }
    };
  }, []);

  return (
    // 组件其他内容
    <button ref={togglerRef} className="navbar-toggler">菜单按钮</button>
    <div ref={collapseRef} className="offcanvas-collapse">折叠内容</div>
    // 组件其他内容
  );
}

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