运行时未处理错误：无法读取null的'data'属性求助排查

用户提供的错误代码片段：

1 | export default function sortNewsByImage(news: NewsResponse) {
2 | const newsWithImage = news.data.filter((item) => item.image !== null);
|                           ^
3 | const newsWithoutImage = news.data.filer((item) => item.image === null);
4 |
5 | const sortedNewsResponse = {

错误原因 #

• 传入sortNewsByImage函数的news参数为null或undefined，直接访问news.data触发空值属性读取错误。
• 代码存在笔误：第3行的数组过滤方法写成了filer，正确应为filter，这会导致后续执行时出现方法不存在的错误。

解决方法 #

1. 添加参数校验
   在访问news.data前先校验参数有效性，避免空值访问：

   export default function sortNewsByImage(news: NewsResponse | null | undefined) {
     // 校验news及data是否存在
     if (!news?.data) {
       return { data: [] }; // 根据业务需求返回默认空结构
     }
     const newsWithImage = news.data.filter((item) => item.image !== null);
     const newsWithoutImage = news.data.filter((item) => item.image === null);
     const sortedNewsResponse = {
       data: [...newsWithImage, ...newsWithoutImage]
     };
     return sortedNewsResponse;
   }
   

2. 修正笔误
   将第3行的filer改为filter，否则会触发TypeError: news.data.filer is not a function错误。
3. 优化类型定义
   调整函数参数类型，明确允许null/undefined，配合可选链操作符?.提升代码健壮性，预防同类空值问题。

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