使用Vue向Firebase写入数据操作失败，寻求解决方案

API 探路者

2026-9-23

问题原因

你代码的核心报错点是CreateMessage.vue组件内未引入firebase/init.js导出的Firestore实例，直接使用了未定义的firestore变量，导致数据库写入操作无法执行。

修复步骤

引入Firestore实例
在CreateMessage.vue的script顶部引入你封装好的db实例，路径根据你项目的目录结构调整即可，示例：

import db from '@/firebase/init.js'

替换变量名
将addDoc方法中的firestore参数替换为引入的db变量。
建议补充异步错误捕获
addDoc是异步API，建议添加async/await和异常捕获逻辑，方便排查权限、网络等其他写入问题。

修复后的完整代码

<script>
import {collection, addDoc} from "firebase/firestore";
// 引入封装好的Firestore实例
import db from '@/firebase/init.js'
export default {
    name: 'CreateMessage',
    props: ['name'],
    data() {
        return {
            newMessage: null,
            errorText: null
        }
    },
    methods: {
        async createMessage () {
            if (this.newMessage?.trim()) {
                try {
                    await addDoc(collection(db, "messages"),{
                        message: this.newMessage,
                        name: this.name,
                        timestamp: Date.now()
                    });
                    this.newMessage = null;
                    this.errorText = null;
                } catch (err) {
                    this.errorText = `消息发送失败：${err.message}`
                    console.error('写入错误：', err)
                }
            } else {
                this.errorText = "A message must be entered first!";
            }
        }
    }    
}
</script>