React导航栏点击显隐功能失效 报Cannot read properties of null错误

在React项目中实现点击按钮展开/收起导航栏的交互时，控制台抛出错误：Cannot read properties of null (reading 'style')。
涉及的导航菜单项包括：

• Get Started
• Home
• Courses
• Blog
• Dashboard
• Login

原有问题代码：

const menu = document.getElementById('menu');
const closeBar = () =>{
    menu.style.top = '-100vh';
}

const openBar = () =>{
    menu.style.top = '17%';
}

• DOM获取时机错误：document.getElementById('menu')在组件渲染阶段就会执行，此时id为menu的DOM节点还未挂载到页面，获取到的返回值为null，后续访问null.style就会触发报错。
• 开发范式不符合React设计逻辑：React是数据驱动视图的框架，直接手动操作DOM修改样式，很容易出现组件状态和实际视图不同步的问题，也不符合React的最佳实践。

用React内置的状态钩子控制导航栏的显隐，完全不需要手动操作DOM，参考实现如下：

import { useState } from 'react';

export default function Navigation() {
  // 定义导航栏展开状态，默认收起
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // 切换导航栏显隐的方法
  const toggleMenu = () => {
    setIsMenuOpen(open => !open);
  };

  return (
    <div className="nav-container">
      {/* 触发切换的按钮 */}
      <button onClick={toggleMenu}>菜单按钮</button>
      {/* 导航菜单，通过状态动态绑定样式 */}
      <div
        id="menu"
        style={{
          position: 'fixed',
          top: isMenuOpen ? '17%' : '-100vh',
          transition: 'top 0.25s ease'
        }}
      >
        <ul>
          <li>Get Started</li>
          <li>Home</li>
          <li>Courses</li>
          <li>Blog</li>
          <li>Dashboard</li>
          <li>Login</li>
        </ul>
      </div>
    </div>
  );
}

特殊场景下必须操作原生DOM的话，要使用React提供的useRef钩子绑定节点，等组件挂载完成后再访问ref对应的DOM属性，禁止在渲染阶段直接调用原生DOM选择API。

内容的提问来源于stack exchange，提问作者Mahfuz Anam Tasnim