Next.js React中空数组处理及getJsonItem报错、变量未定义问题

问题根源 #

1. 当blog.author为空时，urlSlug(blog.author)会传入非法类型参数，触发「error: type is not supported」错误
2. 若过滤后consultants为空集合，直接调用orderBy('order').getJsonItem()会导致all_consultants未定义或抛出异常

修复后的代码 #

// 处理blog.author为空的情况，避免传入非法值给urlSlug
const author_url_slug = blog.author ? urlSlug(blog.author) : '';

// 匹配顾问名称，增加空值判断避免无效匹配
const consultants = (await Collection('consultants')).filter(function (i) {
   return author_url_slug && i.url_slug && urlSlug(i.url_slug) === author_url_slug
});

// 空集合时返回空数组，避免all_consultants未定义
const all_consultants = consultants.length ? consultants.orderBy('order').getJsonItem() : [];

修复说明 #

• 给author_url_slug增加空值兜底，确保urlSlug始终接收合法参数
• 过滤逻辑中增加双重空值判断，跳过无效的匹配条件
• 对consultants集合做长度校验，空集合时直接返回空数组，保证all_consultants始终有定义

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