Nuxt.js SSR模式下async created中出现Cannot read property 'data'错误

核心错误触发点 #

你的代码里存在一个明显的逻辑漏洞：当this.param不存在时，initData函数中的myInfo变量会保持初始的undefined状态，此时执行this.myInfo = myInfo.data，自然会抛出Cannot read property 'data' of undefined错误——因为你试图读取一个undefined变量的data属性。

为什么myInfo状态仍能获取到数据？ #

出现这种矛盾的情况，通常是以下几种原因之一：

• 组件的myInfo在data选项中预先设置了默认值，即使报错，这个默认值依然会保留在状态中
• 存在其他生命周期钩子或方法，在报错发生后给myInfo重新赋值了
• SSR渲染阶段，服务端已经提前注入了myInfo的数据，客户端的报错不会覆盖已存在的服务端渲染结果

修复方案 #

你可以通过两种方式解决这个问题：

方式一：给myInfo设置默认空对象 #

async initData() {
  let myInfo = {}; // 初始化空对象，避免undefined
  if (this.param) {
    if (this.$store.userLogin) {
      myInfo = await this.$repositories.api1(this.param);
    } else {
      myInfo = await this.$repositories.api2(this.param);
    }
  }
  this.myInfo = myInfo.data || {}; // 兜底空对象，避免data不存在的情况
}

方式二：增加条件判断，仅在myInfo存在时赋值 #

async initData() {
  let myInfo;
  if (this.param) {
    if (this.$store.userLogin) {
      myInfo = await this.$repositories.api1(this.param);
    } else {
      myInfo = await this.$repositories.api2(this.param);
    }
    // 只有当myInfo存在时才读取data属性
    if (myInfo) {
      this.myInfo = myInfo.data;
    }
  }
  // param不存在时设置默认值
  else {
    this.myInfo = {};
  }
}

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