问题：访问组件中数据object（定义的数据）中属性也为object对象中的属性时，报错现象

父组件：

export default {
    
    setup(){
    
        const route=useRoute()
        let state=reactive({
    
            list:[],
            playList:{
    
            }
        })
        provide("playList",computed(()=>state.playList))
        
        onMounted(async ()=>{
    
            console.log(route,'route')
            let id=route.query.id
            let res=await getPlayListDetail(id)
            console.log(res,'歌单详情')
            state.playList=res.data.playlist
            
        })
        return{
    
            state
        }
    },
    components:{
    
        ListViewTop
    }
}

子组件：
界面

        <div class="contentRight">
            <h3>{
   {playList.name}}</h3>
            <div class="author">
                <img :src="playList.creator.avatarUrl" class="header">
                <span>{
   {playList.creator.nickname}}</span>
            </div>
            <div class="description">
                {
   {playList.description}}
            </div>
        </div>
    </div>

js代码

   setup(){
    
   //省略
        let playList=inject('playList')
   }

说明：
子组件中使用playList.creator.avatarUrl会报错，提示不存在，是因为初始playList为空，直接访问里面数组或者对象的属性，如creator的属性会报错
更正后父组件：

export default {
    
    setup(){
    
        const route=useRoute()
        let state=reactive({
    
            list:[],
            playList:{
    
                //因为初始playList为空，直接访问里面数组或者对象的属性，如creator的属性会报错
                //可以手动测试
                // let person={
    
                // age；12
                // }
                // console.log(person.age)//undefined
                // console.log(person.friend.name)//报错
                creator:{
    },//初始化
                tracks:[]
            }
        })
        provide("playList",computed(()=>state.playList))
        
        onMounted(async ()=>{
    
            console.log(route,'route')
            let id=route.query.id
            let res=await getPlayListDetail(id)
            console.log(res,'歌单详情')
            state.playList=res.data.playlist
            
        })
        return{
    
            state
        }
    },
    components:{
    
        ListViewTop
    }
}