Reactjs 为什么我从另一个组件收到错误

我已经创建了一个有两个不同导航栏的Next js应用程序.一个导航栏将用于家庭，另一个将用于其他路由.所以在我的header.js文件中，我有一组代码-

import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import HomeNavbar from "./Navbar/HomeNavbar";
import Navbar from "./Navbar/Navbar";

function Header() {
  const router = useRouter();
  const [isHome, setIsHome] = useState(false);

  useEffect(() => {
    if (router.pathname === "/") {
      setIsHome(true);
    } else {
      setIsHome(false);
    }
  }, [router.pathname]);

  return <>{isHome ? <HomeNavbar /> : <Navbar />}</>;
}

export default Header;

因此，当我在家乡路由上时，HomeNavBar正在被使用，在HomeNavBar组件中，我有一组代码，如下所示-

useEffect(() => {
    window.onscroll = function() {
      const maxHeight = 192;
      const minHeight = 40;
      let pixel = window.scrollY;
      let pixelPosition =  maxHeight - pixel;
      pixelPosition = pixelPosition > maxHeight ? maxHeight : pixelPosition;
      pixelPosition = pixelPosition < minHeight ? minHeight : pixelPosition;
      document.getElementById("brandmark").style.cssText = `
        height: ${pixelPosition}px; 
        width: auto;
      `;
    }
  }, [])

这只是一个基本函数，我正在对包含id="brandmark"的元素执行某些操作 但是，当我更改到/关于的路径时，函数仍然在运行，并且我收到一个错误，因为具有该id的元素在关于页面或任何其他路径上不可用. 我怎么才能解决这个问题呢？

以下是错误消息- 未处理的运行时错误 TypeError:无法读取Null的属性(正在读取‘style’)

components\UI\Navbar\HomeNavbar.js (40:43) @ window.onscroll

  38 | pixelPosition = pixelPosition > maxHeight ? maxHeight : pixelPosition;
  39 | pixelPosition = pixelPosition < minHeight ? minHeight : pixelPosition;
> 40 | document.getElementById("brandmark").style.cssText = `
     |                                     ^
  41 |   height: ${pixelPosition}px; 
  42 |   width: auto;
  43 | `;