汉堡菜单点击失效：isOpen、openModal、closeModal未定义排查

核心错误：组件嵌套定义 #

你在外部Navbar组件内部又定义了一个同名的Navbar组件，导致isOpen状态、openModal/closeModal方法都被局限在内部组件的作用域里，外部返回的JSX完全访问不到这些变量，这就是控制台提示未定义的根本原因。

其他需要修复的问题 #

• 未导入Next.js的Link组件，JSX中使用了<Link>但没有引入。
• 一处class属性写错为className（React中需用className代替原生HTML的class）。
• 第一个useEffect缺少依赖项，会引发无限重渲染，需添加[isOpen]作为依赖。
• 内部组件的header参数未使用，可移除。

修复后的完整代码 #

import Image from "next/image";
import Link from "next/link"; // 新增：导入Link组件
import logoImage from "/public/logo.svg";
import burgerImage from "/public/nav-burger.svg";
import closeImage from "/public/close.svg";
import styles from "/components/Layout/layout.module.css";
import { useRouter } from "next/router";
import styled from "styled-components";
import { SmallButton } from "/components/SmallButton/index";
import { useEffect, useState } from "react";
import FocusTrap from "focus-trap-react";

const Navbar = ({ width, height }) => { // 移除未使用的header参数
  const router = useRouter();
  const RedLink = styled.a`
    color: #0f23da;
  `;

  // 将原内部组件的状态和方法移到外部组件作用域
  const [isOpen, setisOpen] = useState(false);

  const closeModal = () => {
    document.documentElement.style.overflowY = "unset";
    setisOpen(false);
  };
  
  const openModal = () => {
    // 禁用侧边栏/模态框打开时的背景滚动
    if (typeof window != "undefined" && window.document) {
      let vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty("--vh", `${vh}px`);
      document.documentElement.style.overflowY = "hidden";
    }
    setisOpen(true);
  };
  
  useEffect(() => {
    if (isOpen) {
      const container = document.querySelector("#first-link");
      if (container) {
        container.tabIndex = -1;
        container.focus();
        setTimeout(() => container.removeAttribute("tabindex"), 1000);
      }
    }
  }, [isOpen]); // 新增：添加依赖项，避免无限循环
  
  useEffect(() => {
    if (width > 1024) {
      closeModal();
    }
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty("--vh", `${vh}px`);
  }, [width, height]);
  
  let mobileMenuClass = null;
  if (isOpen) {
    mobileMenuClass = "overflow-y-auto nav-header";
  }

  return (
    <FocusTrap active={isOpen}>
      <header>
        <nav className="flex flex-col justify-between">
          <div className="px-6 md:px-8.5 lg:px-40">
            <div className="max-auto max-w-container">
              <div className="flex h-[68px] justify-between border-b-2 border-solid border-blue-700 lg:h-[122px]">
                <div className="flex">
                  <div>
                    <Link href="/">
                      <Image
                        src={logoImage}
                        className="h-[42px] w-[96px] lg:h-[70px] lg:w-[130px]"
                        alt="网站Logo" // 补充有意义的alt文本
                        width="120"
                        height="120"
                      />
                    </Link>
                  </div>
                  <ul className=" hidden items-stretch gap-3 md:ml-14 md:gap-12 lg:ml-32 lg:flex">
                    <li>
                      <Link
                        href="/about"
                        legacyBehaviour
                        className="flex h-full font-medium items-center border-0 border-b-blue-700 border-t-transparent hover:border-y-4 max-lg:border-transparent"
                      >
                        <RedLink
                          className={router.pathname == "/about" ? styles.activeTab : ""}
                        >
                          About
                        </RedLink>
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/careers"
                        legacyBehaviour
                        className="flex h-full font-medium items-center border-0 border-b-blue-700 border-t-transparent hover:border-y-4 max-lg:border-transparent"
                      >
                        <RedLink
                          className={router.pathname == "/careers" ? styles.activeTab : ""}
                        >
                          Careers
                        </RedLink>
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/blogs"
                        legacyBehaviour
                        className="flex h-full font-medium items-center border-0 border-b-blue-700 border-t-transparent hover:border-y-4 max-lg:border-transparent"
                      >
                        <RedLink
                          className={router.pathname == "/blogs" ? styles.activeTab : ""}
                        >
                          Blog
                        </RedLink>
                      </Link>
                    </li>
                  </ul>
                </div>
                <ul className="flex items-stretch">
                  <li className="ml-4 hidden lg:block"> {/* 修改class为className */}
                    <Link
                      className="flex h-full font-medium items-center border-0 border-b-blue-700 border-t-transparent hover:border-y-4 max-lg:border-transparent"
                      target="_blank"
                      href="https://www.tbd.website/"
                    >
                      TBD Home
                    </Link>
                  </li>
                  <li className="mt-4 block h-[24px] w-[24px] lg:hidden">
                    <button aria-label="Close Menu">
                      <div className="relative h-6 w-6">
                        <SmallButton
                          src={closeImage}
                          aria-label="Close Menu"
                          alt="关闭菜单"
                          height={30}
                          width={30}
                          clickHandler={closeModal}
                        />
                      </div>
                    </button>
                  </li>
                  <li className="mt-4 -ml-6 block h-[24px] w-[24px] lg:hidden">
                    <button aria-label="Open Menu">
                      <div className="relative h-6 w-6">
                        <SmallButton
                          src={burgerImage}
                          aria-label="Open Menu"
                          alt="打开菜单"
                          height={30}
                          width={30}
                          clickHandler={openModal}
                        />
                      </div>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </nav>
      </header>
    </FocusTrap>
  );
};

export default Navbar;

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