Vue3 script setup中scrollIntoView报错：document.getElementById(...)为null求助

问题现象 #

子组件MainMenu.vue通过emit传递ID值给父组件parent.vue，父组件尝试调用document.getElementById(val)获取目标元素并执行滚动操作时，出现错误：

TypeError: document.getElementById(...) is null

核心原因分析 #

1. 组件ID未正确渲染到DOM：Vue组件默认不会自动将父组件传入的id属性挂载到自身根DOM元素上。比如父组件中写<GroomBride id='1'/>，如果GroomBride组件的根模板没有显式绑定该id，DOM中不会出现带id='1'的元素，导致原生查询失效。
2. 异步渲染时机问题：若目标组件是异步加载或存在条件渲染逻辑，触发滚动时元素可能还未完成DOM挂载。

解决方案 #

方案一：确保组件接收并渲染ID属性 #

修改所有带id传入的子组件（如GroomBride.vue、TimeLines.vue等），让根元素绑定父组件传入的id：

<!-- 以GroomBride.vue为例 -->
<template>
  <!-- 直接绑定父组件传入的id属性 -->
  <div :id="$attrs.id">
    <!-- 组件原有内容 -->
  </div>
</template>

<script setup>
// 可选：显式声明id prop，提升代码可读性
defineProps(['id'])
</script>

这样父组件传入的id会被渲染到子组件的根DOM元素上，document.getElementById就能正确找到目标元素。

方案二：使用Vue Ref替代原生DOM查询（推荐） #

Vue中更符合规范的做法是用ref获取组件/元素引用，避免直接操作原生DOM：

<!-- parent.vue 修改后的代码 -->
<template>
  <section>
    <MainCover></MainCover>
    <QuotePage></QuotePage>
    <!-- 给需要滚动的组件添加统一ref -->
    <GroomBride ref="sectionRefs"></GroomBride>
    <TimeLines ref="sectionRefs"></TimeLines>
    <RunDown ref="sectionRefs"></RunDown>
    <SpecialInvitation></SpecialInvitation>
    <LiveStream></LiveStream>
    <OurMoment ref="sectionRefs"></OurMoment>
    <MessageBox ref="sectionRefs"></MessageBox>
    <FooterPage></FooterPage>
    <MainMenu @page="navigation"></MainMenu>
  </section>
</template>

<script setup>
import { ref } from 'vue'
// 导入所有组件...

// 数组ref存储多个组件的DOM引用
const sectionRefs = ref([])

// 映射ID到组件在数组中的索引（对应父组件中组件的顺序）
const idToIndexMap = {
  '1': 0,
  '2': 1,
  '3': 2,
  '4': 3,
  '5': 4
}

const navigation = val => {
  const targetIndex = idToIndexMap[val]
  const targetComponent = sectionRefs.value[targetIndex]
  if (targetComponent) {
    // 获取组件根DOM元素并执行滚动
    targetComponent.$el.scrollIntoView({ behavior: 'smooth' })
  }
}
</script>

方案三：临时添加DOM存在性检查 #

如果暂时无法修改组件结构，可以在父组件的滚动逻辑中添加检查，避免报错：

const navigation = val => {
  const targetElement = document.getElementById(val)
  if (targetElement) {
    targetElement.scrollIntoView({ behavior: 'smooth' })
  } else {
    console.warn(`未找到ID为${val}的元素`)
  }
}

内容的提问来源于stack exchange，提问作者cahya faisal reza