摘要：针对 RecentComments 返回的数据解析错误问题，总结了完整的解决方案，包括插件引入、数据校验、字段适配及最终代码示例。

解决 RecentComments 数据解析问题

问题描述

      使用 RecentComments 获取最近评论时，出现数据解析错误（如 'undefined' 报错、字段不匹配等），导致页面无法正常显示评论。

解决方案

      通过以下步骤解决数据解析问题：

1. 确保正确引入 RecentComments 插件。
2. 检查返回数据是否为数组。
3. 对字段名进行适配（如 nick / author、comment / content）。
4. 使用模板字符串或字符串拼接生成 HTML。

完整代码示例

<!-- 用于显示最近评论 -->
<div id="waline-recent">加载中...</div>

<!-- 加载 RecentComments 插件 -->
<script type="module">
  import { RecentComments } from 'https://unpkg.com/@waline/recent-comments@latest/dist/waline-recent-comments.module.js';

  // 调用 RecentComments 获取最近评论
  RecentComments({
    serverURL: 'https://waline.gezhong.vip',
    count: 5,
    el: '#waline-recent'
  }).then(({ comments }) => {
    const container = document.getElementById('waline-recent');

    if (!container) {
      console.error('找不到 #waline-recent 元素');
      return;
    }

    // 检查 comments 是否是数组
    if (!Array.isArray(comments)) {
      container.innerHTML = '评论数据异常';
      console.warn('comments 不是数组:', comments);
      return;
    }

    // 渲染每条评论
    const html = comments.map(comment => {
      console.log('单条评论数据:', comment); // 调试用：查看 comment 结构

      // 防止 undefined 报错
      const nick = comment.nick || comment.author || '匿名用户';
      const text = comment.comment || comment.content || '[无内容]';

      return nick + ': ' + text;
    }).join('<br>');

    container.innerHTML = html;

  }).catch(err => {
    console.error('加载最近评论失败:', err);
    document.getElementById('waline-recent').innerHTML = '加载失败';
  });
</script>

注意事项

• 确保页面中存在 #waline-recent 元素。
• RecentComments 必须单独引入，不能从主包获取。
• 后端需支持 /recent_comments 接口。