javascript - 使用无效数据调用函数 DocumentReference.set()。不支持的字段值 : a function (found in field dispatch)"

Question

我正在尝试使用 vue、vuex 构建一个 Web 应用程序，并尝试将其与 firebase 数据库集成。但是当我尝试将数据发布到数据库时会弹出此错误:

[Vue warn]: Error in v-on handler (Promise/async): "FirebaseError: [code=invalid-argument]:
Function DocumentReference.set() called with invalid data. Unsupported field value:
a function (found in field dispatch)" found in 
---> <Subreddit> at src/views/Subreddit.vue
   <App> at src/App.vue
     <Root>

模块“Subreddit.vue”内的脚本代码是:

<script>
import { mapState, mapActions } from 'vuex';

export default {
  data: () => ({
    post: {
      title: '',
      description: '',
      URL: '',
    },
  }),
  computed: mapState('subreddit', ['posts']),
  methods: {
    ...mapActions('subreddit', ['createPost']),
    async onCreatePost() {
      if (this.post.title && (this.post.description || this.post.URL)) {
        await this.createPost(this.post);
      }
    },
  },
};
</script>

这是存储目录中的 subreddit.js，其中在操作中写入了 createPost()，

import db from '@/db';

const posts = db.collection('posts');

const state = {
  posts: [],
};

const actions = {
  async createPost(post) {
    console.log(post); // eslint-disable-line no-console
    const result = posts.doc();
    post.id = result.id; // eslint-disable-line no-param-reassign
    await posts.doc(post.id).set(post);
  },
};

export default {
  namespaced: true,
  state,
  actions,
};

来自 createPost(post) 的 console.log(post) 的输出太长，但就是这样:

{getters: {…}, state: {…}, rootGetters: {…}, dispatch: ƒ, commit: ƒ, …}
commit: ƒ (_type, _payload, _options)
dispatch: ƒ (_type, _payload, _options)
getters: {}
id: "VassMHMvvK2UlfS79bDp"
rootGetters: {}
rootState: {__ob__: Observer}
state: {__ob__: Observer}
__proto__: Object

错误是什么，我无法调试它。

Answer 1

set() 函数的第一个参数应为“文档的字段和值的映射”，如 documentation 中所述。 .

从您的问题来看，您似乎传递了一个不遵守此约束的对象。

{getters: {…}, state: {…}, rootGetters: {…}, dispatch: ƒ, commit: ƒ, …}
commit: ƒ (_type, _payload, _options)
dispatch: ƒ (_type, _payload, _options)
getters: {}
id: "VassMHMvvK2UlfS79bDp"
rootGetters: {}
rootState: {__ob__: Observer}
state: {__ob__: Observer}
__proto__: Object

这正是错误消息所指示的内容:使用无效数据调用 DocumentReference.set()。

所以你应该以这样的方式调整你的对象: map文档的字段和值。

例如:

const obj = {foo: 'bar', bar: 'foo'};
await posts.doc(post.id).set(obj);