Vue3 Script Setup中访问子组件Ref时的类型错误问题求助

我来帮你解决这个TypeScript类型标注的小坑，这在Vue3 + TS的开发里挺常见的，咱们一步步理清楚：

首先，你遇到的第一个错误“myRef is possibly null”，是因为TypeScript默认不知道这个ref会绑定到哪个子组件实例，它会把myRef的类型推断成Ref<null>，自然会提示你值可能为null。而后来用?.出现的“never”类型错误，是因为你没给ref指定正确的类型，导致TypeScript认定这个ref永远只能是null，访问它的属性就会报错。

正确的解决步骤： #

1. 给Ref指定子组件的实例类型
   你之前尝试的const myRef<MyChildComponent> = ref()写法有两个问题：一是语法错误（类型参数应该放在ref函数后面，比如ref<Type>()），二是MyChildComponent是组件的构造函数类型，不是实例类型。我们需要用InstanceType<typeof MyChildComponent>来获取子组件的实例类型，再赋值给ref：

   import MyChildComponent from './MyChildComponent.vue'
   const myRef = ref<InstanceType<typeof MyChildComponent> | null>(null)
   

   这里加| null是因为ref初始化时是null，符合TypeScript的严格类型检查要求。

2. 在onMounted中安全访问子组件属性
   onMounted钩子是在组件挂载完成后执行的，这时候子组件已经渲染完毕，myRef.value肯定是存在的，你有两种安全访问的方式：

   • 方式一：非空断言（!）
     直接告诉TypeScript“这个值绝对不是null/undefined”，适合你确定值一定存在的场景：

     onMounted(() => {
       console.log(myRef.value!.someProp.someProp)
     })
     

   • 方式二：类型守卫（if判断）
     如果你想更严谨，可以用if判断缩小类型范围，让TypeScript自动识别值的有效性：

     onMounted(() => {
       if (myRef.value) {
         console.log(myRef.value.someProp.someProp)
       }
     })
     

3. 如果想用可选链（?.）
   只要正确指定了ref的类型，用可选链也不会再出现“never”类型错误了：

   onMounted(() => {
     console.log(myRef.value?.someProp?.someProp)
   })
   

   这时候TypeScript知道myRef.value可能是子组件实例或者null，可选链的写法就合法了。

补充说明 #

如果你开启了TypeScript的严格模式（strict: true），这类类型问题会更突出，但严格模式其实是帮你提前规避潜在的运行时错误，建议保持开启~

备注：内容来源于stack exchange，提问作者Miguel