React中querySelector用变量类名实现滚动时提示选择器为空报错

报错核心原因 #

• 定位逻辑和DOM结构不匹配：你只给侧边栏按钮设置了和章节标题同名的class，需要滚动到的正文区块并没有绑定同名的class或id属性，querySelector自然找不到对应目标元素，返回null后调用scrollIntoView就会报错。
• 选择器写法存在兼容问题：直接把e.target.className拼接到.后生成CSS选择器非常脆弱——如果章节标题包含空格、特殊符号、中文，生成的选择器会完全失效，比如标题是"使用指南"，对应的选择器.使用指南本身就不符合CSS类选择器的语法规范；如果标题带空格比如"第一章 介绍"，生成的选择器.第一章 介绍会被解析成匹配class为"第一章"、后代标签为"介绍"的元素，完全匹配不到目标。
• 代码存在语法冗余：你写的Target函数末尾多了一个多余的闭合花括号，本身就有语法错误。

修复方案 #

不要依赖className传递定位参数，直接在渲染阶段把章节和按钮的关联关系绑定好，优先用id做元素定位，稳定性更高。

1. 首先给所有需要滚动到的正文区块绑定唯一id，和侧边栏遍历的章节一一对应：

// 正文区块渲染逻辑
{sideBarData.article.document.data.sections.map((sec) => {
  // 空标题统一替换为Intro，和侧边栏显示逻辑保持一致
  const sectionName = sec.section.document.data.section_title.text || "Intro"
  return (
    <section id={sectionName} key={sectionName}>
      {/* 区块内的正文内容写在这里 */}
    </section>
  )
})}

2. 重写滚动逻辑，渲染按钮时直接传入对应章节的标识，不要从事件对象里取className：

// 滚动函数，增加元素存在判断，避免空值报错
const scrollToTarget = (sectionId) => {
  const targetElement = document.getElementById(sectionId)
  if (targetElement) {
    targetElement.scrollIntoView({ behavior: 'smooth' })
  }
}

// 侧边栏按钮渲染逻辑
{sideBarData.article.document.data.sections.map((sec) => {
  const sectionName = sec.section.document.data.section_title.text || "Intro"
  return (
    <button
      key={sectionName}
      onClick={() => scrollToTarget(sectionName)}
    >
      {sectionName}
    </button>
  )
})}

额外排查点 #

如果改完还是存在找不到元素的问题，逐一检查以下项：

• 确认正文区块和侧边栏用的是同一份数据源，不存在渲染时序问题：如果正文内容是异步拉取的，点击按钮时对应的DOM还没挂载到页面上，就会返回null，可以等所有正文渲染完成后再挂载侧边栏按钮，或者给滚动逻辑加防抖重试。
• 如果章节标题包含空格、特殊符号、emoji，不要直接用原始标题当id，可以提前做一层转义：比如把所有非字母数字中文的字符替换成短横线、统一转小写，生成纯字符串格式的唯一id，避免CSS选择器解析失败。
• 不要用class做功能逻辑的定位标识，class的职责是控制样式，后续如果调整样式改了className，会直接导致滚动功能失效，功能定位优先用id或者data-*自定义属性。

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