Vuex Getter传参引发类型校验错误，请求排查解决

AI 小北

2026-8-5

问题：Vuex Getter传参引发类型校验错误（Expected String, got function()）

报错信息

[Vue warn]: Invalid prop: type check failed for prop "....". Expected String, returned function()

场景与代码

首次使用Vuex，尝试通过Getter从数组中查找指定元素，推测问题出在参数title传递或getErrorByMbId调用方式上。

Store中的Getter定义

[GETTERS.GET_ERROR_BY_MB_ID]: state => title => {
  return state.submitErrors.find(e => e.meta.name === title)?.content.titleOfError;
}

组件中映射Getter

getErrorByMbId: PRODUCT_GETTERS.GET_ERROR_BY_MB_ID

计算属性中调用

return this.getErrorByMbId('Number');

非Vuex的正常实现（可运行）

numError() {
  return this.errors.find(
    e => e.meta.name === 'Number'
  )?.content.titleOfError;
}

原因分析

你定义的Vuex Getter是高阶函数（返回函数的函数），当通过mapGetters映射到组件后，如果直接将getErrorByMbId传递给期望String类型的prop，而没有执行它并传入参数，就会把函数本身传过去，导致类型校验失败——组件需要字符串，实际收到的是函数。

解决方案

方案1：在计算属性中返回执行后的结果

在计算属性中调用Getter返回的函数，确保最终输出是字符串：

computed: {
  ...mapGetters({
    getErrorByMbId: PRODUCT_GETTERS.GET_ERROR_BY_MB_ID
  }),
  numError() {
    return this.getErrorByMbId('Number');
  }
}

之后在模板中使用numError（比如{{ numError }}或:error="numError"），传递的就是字符串结果。

方案2：模板中直接调用Getter函数

如果需要动态传参，可直接在模板中调用映射后的Getter函数：

<template>
  <SomeComponent :error="getErrorByMbId('Number')" />
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters({
      getErrorByMbId: PRODUCT_GETTERS.GET_ERROR_BY_MB_ID
    })
  }
}
</script>