Vue3 Props没有默认值但报错的解决方案

"<template>
    <div>
        <el-breadcrumb separator="/" class="ml-12 mt-2">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/methods/zuzhi" rel="external nofollow" >解决方案</a></el-breadcrumb-item>
            <el-breadcrumb-item>{{ lessons.cargoLessons[props.activeIndex].name }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    activeIndex: Number,
});

const lessons = ...
</script>

<script setup lang="ts">
import { withDefaults, defineProps } from 'vue'

const props = withDefaults(defineProps<{
    activeIndex: number
}>(), {
    activeIndex: 0 // Assigning a default value of 0
});

const lessons = {
    cargoLessons: [
        ...
    ]
}
</script>

props：{
	obj: {
		  type: Object,
		  default: () => {}
	},
	arr: {
		type: Array,
		default: () => []
	}
}

props：{
	obj: {
		  type: Object,
		  default: function () {
		  	return {
				obje: ''
			}
		  }
	},
	arr: {
		type: Array,
		default: function () {
		  	return []
		  }
	}
}