vue3中异步传递组件数据，使用defineProps报错的解决方案

vue版本：3.2.37。

以下都是TS开发下，使用setup语法糖的代码，请对号入座。

控制台提示警告类似如下：

Invalid prop: type check failed for prop "data". Expected Array, got Null，或者got Undefined

意思就是prop需要传递一个数组，但是获得了null。

最初使用传统的props定义如下：

const props = defineProps({
    data: {
        type: Array as PropType<IPaperList[] | null>,
        required: true
    }
})

但是这里虽然PropType里声明了一个联合类型，但是并没用，然后就要换一种思路了，使用ts类型声明了。

data是一个联合类型，如果需要设置默认值，则需要使用withDefaults函数。

interface IProps {
    /**
    * 列表数据
    */
    data: IPaperList[]|null,
    /**
    * 初始的排序号
    */
    initIndex?: number,
    /**
    * 选项是否随机
    */
    isRandom?: boolean
}
const props = withDefaults(defineProps<IProps>(), {
    initIndex: 0,
    isRandom:false
})

然后在父组件引用时，需要进行一次三元判断

<Radio ref="ItemSingleRef" :data="props.exam?props.exam.singleBanks:null" :initIndex="props.exam?.project?.torf.count"
:is-random="props.exam?.project.isRandomItem"></Radio>

这样就不会报错了。