迁移数据表新增列后无法登录ReadyKit，出现Vue渲染错误

核心问题定位 #

报错TypeError: Cannot read properties of null (reading 'company_banner')的本质是：你在Vue模板或渲染函数中尝试访问一个null对象的company_banner属性。结合你新增数据库列的操作，大概率是以下两种情况：

• 后端接口返回的用户数据结构变化，新增列后部分用户数据中company_banner字段为null，但前端代码未做空值判断
• 数据表新增列时未设置默认值，导致旧数据该字段为null，后端查询时直接返回，前端未处理

快速修复步骤 #

1. 前端紧急修复 #

在Vue模板中对可能为null的对象添加空值判断，两种常用方式：

• 可选链操作符（推荐）：

<template>
  <!-- 替换原有的 {{ user.company_banner }} -->
  {{ user?.company_banner }}
</template>

• 条件判断+空值兜底：

<template>
  {{ user && user.company_banner || '默认图片地址' }}
</template>

2. 后端/数据库根治方案 #

• 检查新增的company_banner列是否设置了默认值（比如空字符串或默认图片URL），并对已有数据批量更新该字段的空值
• 确认后端接口在查询用户数据时，是否对null字段做了处理（比如替换为默认值），避免将null返回给前端

3. 排查部署缓存问题 #

更换数据库后仍未解决，可能是缓存导致：

• 强制刷新前端页面（Ctrl+F5），清除浏览器缓存
• 重启后端服务，确保接口读取的是新数据库的最新数据

为什么换数据库没用？ #

如果新数据库是从旧库备份恢复的，旧数据中company_banner的null值会被同步；如果是全新数据库，可能是新增用户时该字段未被正确赋值，同样会出现null情况。

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