Vue3+TypeScript：如何为二维数组类型组件Props定义类型

你遇到的props.grid[0]未定义错误，并非defineProps的类型定义问题，核心原因是组件初始化阶段，父组件的trackGrid初始值为空数组[]，此时子组件接收的props.grid也是空数组，直接访问grid[0][0]自然会触发未定义错误。

下面是具体的解决和优化方案：

1. 安全访问数组元素 #

避免直接链式访问空数组的索引，使用可选链或条件判断做防护：

// 可选链操作符（推荐）
console.log(props.grid?.[0]?.[0]);

// 或者条件判断
if (props.grid.length > 0) {
  console.log(props.grid[0][0]);
}

2. 延迟渲染子组件 #

在父组件中，确保trackGrid有数据后再渲染mainGrid，避免子组件接收空数组：

<mainGrid :grid="trackGrid" v-if="trackGrid.length > 0"></mainGrid>

3. 优化reactive数组的类型声明 #

你当前的trackGrid声明写法可行，但可以更符合Vue的TS最佳实践：

// 显式指定泛型，让TS更清晰地推导类型
export const trackGrid = reactive<TrackCell[][]>([]);

4. 确认Props类型定义的正确性 #

你的子组件Props接口定义完全正确：

interface Props {
  grid: TrackCell[][];
}
const props = defineProps<Props>();

TypeScript会自动校验传入的数组类型，类型部分无需修改。

调试建议 #

可以先在子组件中打印props.grid的完整值，确认初始化时是否为空数组，再排查后续数据更新的时机是否符合预期：

console.log('mainGrid grid data:', props.grid);

内容的提问来源于stack exchange，提问作者quilkin