vue3 双重for循环 ts定义类型

 案例

<template>
<view class="slider">
      <swiper autoplay interval="2000" circular indicator-dots indicator-color="rgba(255,255,255,1)"
        indicator-active-color="rgba(255,255,255,.6)">

        <swiper-item v-for="(item) in  swipers " :key="(item as Swipers).goods_id">
          <navigator :url="`/packone/goods/index?id=${(item as Swipers).goods_id}`">
            <image :src="(item as Swipers).image_src" />
          </navigator>
        </swiper-item>

      </swiper>
    </view>
    <!-- 功能导航 -->
    <view class="navs">

      <navigator v-for=" item  in  navs " :key="item.name"
        :url="item.navigator_url ? '/pages/category/index' : '/packone/list/index?query=' + item.name">
        <image :src="item.image_src" />
      </navigator>

    </view>
    <!-- 栏目楼层 -->
    <view class="floors">
      <!-- 1 -->
      <view class="floor" v-for=" item  in  floors " :key="item.index">
        <!-- title -->
        <view class="ftitle">
          <image :src="item.floor_title.image_src" />
        </view>
        <!-- pics -->
        <view class="fitem">
          <navigator url v-for=" item2  in  item.product_list " :key="item2.index">
            <image :src="item2.image_src" />
          </navigator>
        </view>
      </view>

    </view>
</template>
<script setup lang="ts">

    interface Swipers {
      goods_id: number
      image_src: string
    }

    interface NavItem {
      name: string;
      navigator_url?: string;
      image_src: string;
    }

    interface ProductListItem {
      index: number;
      image_src: string;
    }

    interface floors {
      index: number
      floor_title: {
          name: string
          image_src: string
      }
      product_list: ProductListItem[]
    }    

    const swipers = ref([])//轮播图数据
    const navs = ref<NavItem[]>([]) //导航
    const floors = ref<floors[]>([])//商品楼层数据
</script>