Vue3通过Props字符串加载组件报Invalid vnode type错误排查

问题场景 #

你当前的Vue3组件尝试通过props传递字符串类型的组件名称，动态渲染组件时出现Invalid vnode type when creating vnode错误，但直接硬编码组件对象时可以正常加载。

核心原因 #

Vue3的<component :is="...">要求绑定的是组件对象（或全局注册的组件名称字符串），而你通过props传递的是组件名称字符串，但该组件仅在当前组件局部导入，并未全局注册，Vue无法将字符串映射到对应的组件对象，因此报错。硬编码时你直接赋值了导入的组件对象，所以能正常识别。

解决方案 #

步骤1：创建组件映射表

先导入所有可能用到的动态组件，然后建立组件名称与组件对象的映射关系：

<script setup>
// 导入所有需要动态渲染的组件
import TableSwitcher from "@/components/Dialogs/Components/TableSwitcher.vue"
// 如有其他组件，继续导入
// import UserForm from "@/components/Dialogs/Components/UserForm.vue"

// 建立名称-组件对象的映射
const componentMap = {
  TableSwitcher,
  // UserForm
}
</script>

步骤2：用计算属性处理组件映射

替换原来的watch赋值逻辑，用computed自动根据props的组件名称获取对应的组件对象：

<script setup>
// ... 其他导入和变量定义

const props = defineProps({
  // ... 原props定义不变
})

// 用computed自动映射组件
const currentComponent = computed(() => {
  // 返回对应的组件对象，找不到则返回null
  return componentMap[props.component] || null
})
</script>

步骤3：修正dialog的ref用法

原来直接通过document.getElementById获取DOM的方式会破坏ref的响应式，改用template绑定ref：

<script setup>
// ... 其他代码

// 初始化dialog为ref
const dialog = ref(null);

const closeDialog = (confirmAction = false) => {
  // 通过.value访问DOM元素，添加可选链避免报错
  dialog.value?.close()
  dialogStore.close(confirmAction)
}

// 移除onMounted里的DOM获取逻辑
// onMounted(() => {
//   dialog = document.getElementById(props.id);
// });
</script>

<template>
  <dialog :id="id" ref="dialog">
    <!-- 绑定计算属性返回的组件对象 -->
    <component :is="currentComponent"></component>
  </dialog>
</template>

步骤4：调用组件时保持字符串传递

激活组件的方式不变，继续传递组件名称字符串即可：

<main-dialog
    v-if="component"
    :component="component"
    :open="true">
</main-dialog>

额外优化（可选） #

如果你的动态组件数量较多，也可以用异步组件结合映射表的方式，优化首屏加载性能：

const componentMap = {
  TableSwitcher: () => import("@/components/Dialogs/Components/TableSwitcher.vue"),
  // 其他异步组件
}

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