React TypeScript报错ts(2531): Object is possibly 'null' 如何解决

这个报错的核心原因是你初始化list时赋值为null，TypeScript静态类型检查时会判定该变量存在为null的可能性，直接访问属性就会触发警告。最规范的解决方式是结合类型定义+空值校验，既消除警告也保留TS的类型安全能力。

推荐方案（符合TS开发规范） #

1. 定义接口返回数据的对应类型 #

按照你给出的接口返回结构，先声明匹配的TS类型：

// 可根据实际业务细化city、list数组内的字段类型，暂时不确定的字段可以先用unknown/any占位
interface ApiResponse {
  city: Record<string, unknown>;
  cod: string;
  message: number;
  cnt: number;
  list: Array<Record<string, unknown>>;
}

2. 给变量、axios请求标注对应类型 #

不要让TS自动把list的类型推断为null，手动声明变量的联合类型，同时给axios请求加泛型，让TS自动识别返回的response.data结构：

// 声明变量类型为 接口响应类型 或者 null
let list: ApiResponse | null = null;

// axios请求时传入泛型，后续拿res.data时TS会自动匹配ApiResponse类型
const response = await axios.get<ApiResponse>('你的接口请求地址');
list = response.data;

3. 访问属性前增加空值判断 #

在访问list的内部属性前，先判断变量不为空、且目标数组长度足够，既消除TS警告，也能避免接口异常时出现运行时报错：

// 校验通过后再访问属性，TS会自动识别该分支下list不可能为null
if (list && list.list.length >= 3) {
  console.log(list.list[2]);
}

临时快速消除警告的方案（不推荐长期使用） #

如果只是临时调试需要快速消掉警告，可以用以下方式，但会丢失部分TS类型安全能力：

• 非空断言：在变量后加!，手动告诉TS该位置变量绝对不为null，写法为console.log(list!.list[2])。注意这种写法没有运行时校验，一旦请求失败list真为null会直接抛错。
• 初始值替换为空结构：不给list设null初始值，直接赋值一个符合类型结构的空默认值，比如let list: ApiResponse = { city: {}, cod: '', message: 0, cnt: 0, list: [] }，后续请求成功后再覆盖赋值即可。
• 关闭严格空值检查：在tsconfig.json中将strictNullChecks配置项设为false，会全局关闭这类空值校验，大幅降低TS的类型防护能力，极度不推荐。

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