Nuxt.js动态路由传参查询数据库时出现TypeError报错求助

看起来你遇到的核心问题有两个：一是模板渲染时problem为null导致的报错，二是后续请求参数变为null且返回304缓存状态。咱们一步步来解决：

1. 先应急修复模板报错，避免页面崩溃 #

报错的直接原因是模板尝试访问null对象的title属性。你可以通过两种方式快速解决：

方式一：使用可选链操作符（推荐） #

把模板里的{{problem.title}}改成{{problem?.title}}，同理problem.createtime改成problem?.createtime。可选链会在problem为null/undefined时自动停止访问，避免报错：

<h2>{{problem?.title}}</h2>
<p>
  <span>{{labes(index)}}</span>
  <span>{{timeago(problem?.createtime)}}</span>
</p>

方式二：用v-if做存在性判断 #

给依赖problem的容器添加v-if，确保只有problem存在时才渲染：

<div class="fl title" v-if="problem">
  <h2>{{problem.title}}</h2>
  <p>
    <span>{{labes(index)}}</span>
    <span>{{timeago(problem.createtime)}}</span>
  </p>
</div>

2. 排查并解决params.id为null的根本原因 #

后续请求参数变为null，大概率是路由参数传递或页面缓存的问题，咱们从这几个方向入手：

（1）确认动态路由文件命名是否正确 #

Nuxt的动态路由要求文件名必须以_开头，比如你的页面应该是pages/qa/items/_id.vue，这样Nuxt才能正确捕获params.id。如果文件名不对，参数就会丢失。

（2）在asyncData中添加参数校验与错误处理 #

在发起请求前先检查params.id是否存在，避免用null发起无效请求，同时捕获接口返回异常：

asyncData({ params, error }) {
  // 先校验参数是否存在
  if (!params.id) {
    error({ statusCode: 404, message: "该问题不存在" });
    return;
  }

  return axios
    .all([
      problemApi.findById(params.id),
      replyApi.findByProId(params.id),
      problemApi.findPL(params.id)
    ])
    .then(axios.spread(function(pojo, replyList, labelList) {
      // 检查接口返回的数据是否有效
      if (!pojo.data.data) {
        error({ statusCode: 404, message: "该问题不存在" });
        return;
      }
      return {
        problemId: params.id,
        replyList: replyList.data.data,
        problem: pojo.data.data,
        labelList: labelList.data.data
      };
    }))
    .catch(err => {
      error({ statusCode: 500, message: "获取数据失败，请稍后重试" });
      console.error("请求异常:", err);
    });
},

（3）解决304缓存问题 #

304状态码说明浏览器复用了之前的缓存请求，但此时参数可能异常。你可以通过两种方式避免缓存：

方式一：给请求添加时间戳参数

修改你的API请求方法，添加一个时间戳参数，让浏览器认为每次都是新请求：

// 以problemApi.findById为例，修改为：
findById(id) {
  return axios.get(`/api/problem/${id}`, {
    params: {
      t: Date.now() // 添加时间戳，强制浏览器不缓存
    }
  });
}

方式二：禁用Nuxt的预加载缓存

在上一页的nuxt-link添加no-prefetch属性，防止Nuxt预加载页面导致缓存异常：

<nuxt-link :to="'/qa/items/'+item.id" target="_blank" no-prefetch>{{item.title}}</nuxt-link>

3. 优化代码：避免模板中调用异步方法 #

你模板里的labes(index)方法会在每次渲染时触发异步请求，不仅性能差，还可能导致labelName数组不断累加。建议在asyncData中一次性获取所有标签名称：

asyncData({ params, error }) {
  if (!params.id) {
    error({ statusCode: 404, message: "该问题不存在" });
    return;
  }

  return axios
    .all([
      problemApi.findById(params.id),
      replyApi.findByProId(params.id),
      problemApi.findPL(params.id)
    ])
    .then(async axios.spread(function(pojo, replyList, labelList) {
      if (!pojo.data.data) {
        error({ statusCode: 404, message: "该问题不存在" });
        return;
      }

      // 批量获取所有标签名称
      const labelPromises = labelList.data.data.map(item => labelApi.findOne(item.labelid));
      const labelResults = await axios.all(labelPromises);
      const labelName = labelResults.map(res => res.data.data.labelname);

      return {
        problemId: params.id,
        replyList: replyList.data.data,
        problem: pojo.data.data,
        labelList: labelList.data.data,
        labelName // 直接返回标签名称数组
      };
    }))
    .catch(err => {
      error({ statusCode: 500, message: "获取数据失败，请稍后重试" });
      console.error("请求异常:", err);
    });
},

然后模板里直接使用{{labelName[index]}}即可，不需要再调用labes方法。

内容的提问来源于stack exchange，提问作者S-White