Vue3+TS项目中Property 'names'未定义报错及数据不显示问题

核心错误原因 #

1. CrewList组件变量引用不匹配：模板中使用names变量，但组件接收的props是modelValue，导致渲染时找不到names，触发警告。
2. 违反Vue props只读规则：Crew组件中直接对props的names执行push操作，Vue禁止直接修改props，会导致数据更新不生效。
3. 数据类型不匹配：从Firebase获取的数据包含id字段，但NameInterface未定义该字段，存在类型隐患。

具体修复步骤 #

1. 修正CrewList.vue的变量引用 #

组件通过v-model接收的数组在props中是modelValue，需在模板中正确引用，同时添加v-for的:key避免警告：

<script setup lang="ts">
import type { NameInterface } from "@/name.interface";

// 解构props并重命名，方便模板使用
const { modelValue: names } = defineProps<{
  modelValue: NameInterface[];
  nameText: string;
}>();
</script>

<template>
  <div class="container d-flex flex-rows justify-content-center pb-30">
    <div v-for="n in names" :key="n.id || n.name">
      <p>{{ n.name }}</p>
    </div>
  </div>
</template>

2. 修复Crew组件修改props的问题 #

Vue中props是只读的，需通过emit通知父组件更新数据，同时正确处理双向绑定：

<script setup lang="ts">
import type { NameInterface } from "@/name.interface";
import { ref } from "vue";
import CrewList from "./CrewList.vue";

// 接收props并定义更新事件
const props = defineProps<{
  names: NameInterface[];
}>();
const emit = defineEmits<{
  "update:names": [value: NameInterface[]];
}>();

const nameText = ref<string>("");

const addName = () => {
  const newName = {
    id: Date.now().toString(), // 临时生成唯一ID，后续可替换为Firebase返回的ID
    name: nameText.value,
  };
  // 创建新数组并触发父组件更新
  const updatedNames = [...props.names, newName];
  emit("update:names", updatedNames);
  nameText.value = "";
};
</script>

<template>
  <div class="full-w d-flex flex-column align-items-center">
    <div class="form-container d-flex align-items-center">
      <form action="" @submit.prevent="addName">
        <input
          placeholder="test"
          type="text"
          v-model="nameText"
          class="mr-30"
        />
        <button class="btn" :disabled="!nameText">Envoyer</button>
      </form>
    </div>
    <div class="container mt-40">
      <!-- 正确传递modelValue给CrewList -->
      <CrewList v-model:modelValue="props.names" :nameText="nameText" />
    </div>
  </div>
</template>

3. 更新NameInterface匹配数据结构 #

补充id字段，确保从Firebase获取的数据与接口类型一致：

export interface NameInterface {
  id?: string; // 设为可选，兼容新增时未生成ID的情况
  name: string;
}

4. 清理无效文件 #

删除重复的CrewList.app文件，避免项目结构混乱。

修复效果验证 #

1. 控制台的Property "names" was accessed during render but is not defined on instance警告消失
2. 页面正常渲染Firebase读取的名称列表
3. 新增名称功能可正常触发，数据正确向上同步到App组件的names变量

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