我想在 A 页面使用 B 组件，A 页面向 B 组件 Props 了一个数组对象报错

报错内容：
00:05:12.264 ‌error: java.lang.ClassCastException: uni.UNI94A0939.listItem1ReactiveObject cannot be cast to uni.UNI94A0939.listItem‌
00:05:12.264 at components/cell/cell.uvue:9:2
00:05:12.264 7 | class="cell-group"
00:05:12.264 8 | >
00:05:12.264 9 | <view
00:05:12.264 | ^^^^^
00:05:12.264 10 | class="cell-group-item"
00:05:12.264 11 | v-for="(cell,index) in list"

这是 B 组件

<template>  
    <view  
        :style="{  
            'background-color':bg,  
            'border-radius':borderRadius  
        }"  
        class="cell-group"  
    >  
        <view  
            class="cell-group-item"  
            v-for="(cell,index) in list"  
            :key="index"  
            :style="{'background-color': cell.bg}"  
            :hover-start-time="0"  
            :hover-stay-time="100"  
            :hover-class="cell.hover_class ? 'is-hover' : 'none'"  
        >  
            <view class="cell-group-item-title">  
                <text class="cell-group-item-title-text">{{cell.title}}</text>  
            </view>  
            <view class="cell-group-item-right">  
                <view class="cell-group-item-right-content">  
                    <slot name="content"></slot>  
                </view>  
                <view v-if="cell.showRightIcon" class="cell-group-item-right-content-icon">  
                    <uni-icons :size="cell.rightIconSize" :color="cell.rightIconColor" :type="cell.rightIcon"></uni-icons>  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  

<script lang="uts">  
// import { PropType } from "vue";  
    /*  
        bg 背景颜色  
        borderRadius 圆角  
        title 标题  
        hover_class 是否点击出现态  
        showRightIcon 是否显示右侧图标  
        rightIcon 右侧图标  
        rightIconColor 右侧图标颜色  
        rightIconSize 右侧图标大小  
    */  
  type listItem = {  
        bg: string,  
        title: string,  
        hover_class: boolean,  
        showRightIcon: boolean,  
        rightIcon: string,  
        rightIconColor: string,  
        rightIconSize: number  
    }  
    export default {  
        name:"cell",  
        props: {  
            list: {  
                type: Array as PropType<listItem[]>,  
                default: ():listItem[] => []  
            },  
            "bg": {  
                type: String,  
                default: "#ffffff"  
            },  
            "borderRadius": {  
                type: String,  
                default: "10px"  
            }  
        },  
        data() {  
            return {  

            };  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    .is-hover{  
        background-color: #eeeeee;  
    }  
</style>

这是 A 页面

<template>  
  <cell :list="cellList">  
    <template v-slot#content>  
      <text>Test</text>  
    </template>  
  </cell>  
</template>  
<script lang="uts">  
    import cell from "@/components/cell/cell.uvue"  
export default {  
  data(){  
    return {cellList: [bg: "#ffffff",title:"Test", hover_class: false, showRightIcon: false, rightIcon: "right", rightIconColor: "#000000,rightIconSize:20"]}  
  }  
}  
</script>