uni-app中filter访问嵌套属性前必须判空,因filter是纯函数且Vue 3已移除filter支持,应改用可选链、默认值或computed封装格式化逻辑。

filter里访问嵌套属性前没判空
uni-app 的 filters 是纯函数,不绑定 this,也不感知响应式状态。如果你在 filter 函数里直接写 value.user.name,而 value 或 value.user 是 null / undefined,就会立刻报 Cannot read properties of null (reading 'name')。
常见场景:列表渲染时用 v-for + :key="item.id",但某条 item 是空对象或后端返回字段缺失;或者 Vuex / globalData 中数据异步加载中,filter 已执行但数据还没到位。
- 所有嵌套访问必须加守卫:用
value?.user?.name(ES2020 可选链),或退兼容写法value && value.user && value.user.name - filter 不该承担数据初始化责任——确保传入的
value至少是{},而不是undefined。可在 data() 或 setup() 中设默认值,比如list: [],而非留空 - 避免在 filter 里调用 this.xxx 或 this.$store —— filter 没有 this 上下文,强行用会直接报
Cannot read property 'xxx' of undefined
在 Vue 3 + Composition API 里误用 filters
uni-app 3.0+ 默认启用 Vue 3,而 Vue 3 已**移除全局/局部 filters 支持**。如果你在 setup() 中定义了 filters 对象,或在模板中写了 {{ item.time | formatTime }},H5 端可能静默失效,小程序端则大概率报 Cannot read properties of undefined (reading 'formatTime') —— 因为 filter 函数根本没注册上。
- Vue 3 下改用计算属性或
computed封装格式化逻辑,例如:const formattedTime = computed(() => formatTime(item.value)) - 如果必须复用,把格式化函数抽成独立工具函数(如
utils/date.js),在 script 和 template 中都 import 使用 - 检查项目是否启用了
"vueVersion": "3"(见vue.config.js或 HBuilderX 项目配置),别在 Vue 3 项目里还按 Vue 2 写法配 filters
uView 或其他组件库的 slot 传参引发嵌套访问失败
比如 uView 的 u-table 或 u-list 用 slot-scope 传 scope 对象,你在 slot 模板里写 {{ scope.row.userInfo.nickName | upperCase }},但某些行的 scope.row.userInfo 是 null,filter 就会崩。
- slot 透传的数据不可信,必须在 slot 内部先做保护:写成
{{ (scope.row.userInfo || {}).nickName | upperCase }} - 更稳妥的是提前在父组件处理好数据,比如用
map统一补默认值:list.map(i => ({ ...i, userInfo: i.userInfo || {} })) - 注意 uView 2.x 的
u-form等组件内部也大量用 filter 做校验提示,若 rules 里引用了未定义字段(如prop="profile.avatar"但数据里没profile),也会触发同类错误
pages.json 或条件编译导致 filter 文件未正确加载
报错堆栈显示 filter 函数本身是 undefined(如 Cannot read properties of undefined (reading 'myFilter')),说明 filter 没注册成功,不是数据问题,而是路径或时机问题。
- 检查 filter 定义位置:全局 filter 要在
main.js里用app.config.globalProperties.$filters = {...}(Vue 3)或Vue.filter(...)(Vue 2),不能只写在某个页面的filters:选项里 - 条件编译(如
#ifdef MP-WEIXIN)包裹了 filter 定义,但运行环境不匹配,导致该平台下 filter 为空对象 - HBuilderX 缓存可能导致修改后的 filter 文件未被重新加载,重启 IDE + 清理
unpackage目录再试


















