Firestore数据展示异常：需显示用户输入消息却出现格式问题

嘿，我看你遇到的问题是从Firestore读出来的消息显示成了[{"hi"}]这种奇怪的格式，而不是预期的单个文本"hi"对吧？咱们一步步来排查和搞定这个问题：

问题根源分析 #

先拆解你代码里的逻辑：

• 写入时你把输入框的this.message存到Firestore的message字段里
• 读取时把每个文档的message字段值push到task数组，然后循环渲染

最终显示异常大概率是下面两种情况之一：

1. Firestore里的message字段存的是数组：比如你之前不小心存了["hi"]而不是直接存字符串"hi"，导致读取后task变成嵌套数组[["hi"]]，渲染时就会显示成数组的字符串形式
2. 前端渲染的DOM结构有问题：你的代码里外层已经有一个<v-list-item>，里面又循环生成<v-list-item>，嵌套结构会导致Vuetify组件渲染异常

具体解决步骤 #

1. 先检查Firestore的文档数据

打开Firebase控制台，找到test集合下的文档，查看message字段的类型：

• 如果是数组类型（值显示为["hi"]），先把这些错误格式的文档删掉，避免影响后续测试

2. 确保写入的是字符串类型

你的addTask方法代码本身是没问题的——输入框绑定的message默认是字符串，但如果之前有测试代码把message改成了数组，那要确认现在输入框输入的内容是纯字符串。比如输入"hi"后，Firestore里的message字段应该是字符串类型的"hi"，而非数组。

3. 处理可能的嵌套数组（可选，针对历史数据）

如果不想删除现有数组格式的历史数据，可以在读取时做一层转换，把数组里的内容提取出来：
修改getTask方法里的逻辑：

async getTask() {
  let snapshot = await db.collection("test").get();
  let task = [];
  snapshot.forEach(doc => {
    let appData = doc.get('message');
    // 如果读取到的是数组，取第一个元素；否则直接用原内容
    const actualMessage = Array.isArray(appData) ? appData[0] : appData;
    task.push(actualMessage);
  });
  this.task = task;
  this.scrollToEnd(); // 记得调用滚动，不然新消息可能看不到
}

4. 修复前端渲染的DOM结构

你原来的代码里<v-list-item>嵌套了，不符合Vuetify组件的使用规范，会导致渲染异常。改成下面的结构：

<v-container class="messagebox" id="chatbox">
  <!-- 用v-list包裹列表项，符合Vuetify的组件结构 -->
  <v-list>
    <v-list-item v-for="message in task" :key="message">
      <v-chip color="primary" class="sent">{{ message }}</v-chip>
    </v-list-item>
  </v-list>

  <v-row>
    <v-col cols="12">
      <v-text-field 
        v-model="message" 
        rounded filled outlined dense 
        label="Message" 
        append-icon="mdi-send-circle" 
        @click:append="addTask"
      ></v-text-field>
    </v-col>
  </v-row>
</v-container>

另外，把scrollToEnd里的#chatbox绑定到外层的v-container上，确保滚动逻辑能正常触发。

最后测试 #

做完上面的修改后，重新输入一条消息"hi"发送，刷新页面，应该就能正常显示单个"hi"了。

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