Nuxt3调用navigateTo跳转页面时出现Uncaught (in promise) TypeError错误

核心错误原因 #

你遇到的TypeError: Cannot read properties of null (reading 'parentNode')，本质是模板语法错误导致DOM渲染异常引发的，具体问题如下：

1. 重复定义同名插槽
   模板里重复使用了<template #main-content>插槽，Nuxt处理重复同名插槽时会破坏DOM结构，触发该错误。
2. 标签未闭合
   绑定点击事件的<div @click='gotoDetail(item.id)'缺少闭合标签</div>，导致DOM结构不完整。
3. v-for的key值不规范
   :key=item直接用对象作为key不符合Vue规范（应使用唯一基本类型值如item.id），且缺少引号存在语法问题。

修复后的代码 #

修改/pages/items/index.vue代码如下：

<script setup lang="ts">
const gotoDetail = async (itemId) => {
  await navigateTo(`/items/${itemId}`)
} 
</script>

<template>
  <div>
    <NuxtLayout name="main-standard">
      <template #main-content>
        <div v-for='item in items' :key="item.id">
          <div @click='gotoDetail(item.id)'>{{ item.title }}</div>
        </div>
      </template> 

      <!-- 改用布局中已定义的其他插槽放置侧边栏内容 -->
      <template #aside>
        <!-- aside content -->
      </template> 
    
    </NuxtLayout>
  </div>
</template>

补充说明 #

• 确保main-standard布局中存在你使用的插槽（比如#main-content和#aside），如果布局里没有对应插槽，需调整为布局已定义的插槽名称。
• 编程式路由的navigateTo逻辑本身无问题，错误根源完全来自模板渲染异常。

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