React使用useContext时提示cardsList属性不存在TS报错

你遇到的TypeScript报错 Property 'cardsList' does not exist on type 'CardsContextProps | null' 触发逻辑非常明确：
你在创建CardsContext时传入的初始值是null，TypeScript会根据入参自动推导Context的返回值类型为CardsContextProps | null。在严格类型校验规则下，你直接对这个可能为null的值做解构取cardsList属性，TS会判定null类型上不存在该属性，因此抛出类型错误。

你可以根据自己的业务场景选以下任意一种方案修复：

• 方案1：解构前做空值校验（最严谨，无运行时风险）
  不要直接解构useContext的返回值，先判断值不为空再使用，同时可以做兜底渲染：

  export default function Header() {
    const contextValue = useContext(CardsContext);
    const classes = useStyles();
  
    // 空值兜底
    if (!contextValue) return null;
    const { cardsList } = contextValue;
  
    return (
      <Grid className={classes.header}>
        <Box
          sx={{
            width: 200,
          }}
        >
          <img src={PkmLogo} width="100%" alt="logo" />
        </Box>
        <CustomTextField
          label="Search a Card"
          id="outlined-start-adornment"
          sx={{ m: 1, width: "100%" }}
        />
      </Grid>
    );
  }
  

• 方案2：非空断言（适合100%确定组件在Context.Provider包裹范围内的场景）
  给useContext的返回值加!非空断言，手动告诉TS这个值不可能为null，跳过空值校验：

  // 仅需修改解构那一行
  const { cardsList } = useContext(CardsContext)!;
  

  注意：如果后续组件被放到Provider外层使用，该写法会引发运行时解构错误，使用前请确认组件层级
• 方案3：给Context传入合法的默认初始值（从根源消除null类型）
  如果你不想每次使用Context都做空值判断，可以在创建Context时传入符合CardsContextProps类型结构的默认值，替代null作为初始入参，TS推导的Context类型就不会包含null：

  // 在CardsContext定义的文件中修改
  // 请根据你实际的CardsContextProps类型补全初始值字段
  const defaultContextValue: CardsContextProps = {
    cardsList: [],
    // 其余Context属性对应补全初始值即可
  }
  export const CardsContext = createContext<CardsContextProps>(defaultContextValue);
  

  这种写法不需要修改Header组件的原有代码，也不会有空值引发的运行时风险，是通用性最高的方案。

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