TypeScript中避免可选链：Redux状态非空报错的解决方法

下面提供几种可行的方案，帮你避免使用可选链访问Targetfarms的属性：

方案1：给Targetfarms设置初始默认值 #

问题根源在于初始状态里Targetfarms为null，TypeScript会认为它可能始终为null。你可以给Farmstype定义一个完整的默认对象，让初始状态不再是null：

// 先定义各子类型的默认值（根据实际子类型结构补充）
const defaultAircon: aircontype = {}; // 填充aircontype的必填属性
const defaultPlaceInfo: placeInfotype = {}; // 填充placeInfotype的必填属性
const defaultProductCodeInfo: productCodeInfotypes = {}; // 对应子类型默认值

// 定义完整的Farmstype默认对象
const defaultFarm: Farmstype = {
  aircon: defaultAircon,
  children: [],
  equips: [],
  latitude: 0,
  longitude: 0,
  modDate: "",
  name: "",
  placeId: 0,
  placeInfo: defaultPlaceInfo,
  productCode: "",
  productCodeInfo: defaultProductCodeInfo,
  productLifeCycles: [],
  roadNameAddress: "",
  stnIds: 0,
  type: ""
};

// 修改Redux状态类型和初始值
interface InitialState {
  Targetfarms: Farmstype; // 移除 | null
}

const initialState: InitialState = {
  Targetfarms: defaultFarm,
};

之后组件里就可以直接访问属性，无需可选链：

const MainPage = () => {
  const { Targetfarms } = useSelector((state: RootState) => state.post);
  console.log("Targetfarms:", Targetfarms.placeId); // 无类型错误
};

方案2：组件内提前做null检查，条件渲染 #

如果不想修改Redux初始状态，可以在组件里先判断Targetfarms是否为null，确认非空后再访问属性：

const MainPage = () => {
  const { Targetfarms } = useSelector((state: RootState) => state.post);

  // 数据未加载时返回加载状态
  if (!Targetfarms) {
    return <div>加载中...</div>;
  }

  // 此处TypeScript能推断Targetfarms非null，直接访问即可
  console.log("Targetfarms:", Targetfarms.placeId);
  return <div>页面内容</div>;
};

方案3：使用非空断言（谨慎使用） #

如果你能100%保证组件渲染时，Targetfarms已经通过targetFarm action完成赋值，不会为null，可以用非空断言!跳过类型检查：

const MainPage = () => {
  const { Targetfarms } = useSelector((state: RootState) => state.post);

  // 用!断言Targetfarms不为null
  console.log("Targetfarms:", Targetfarms!.placeId);
};

注意：这种方法有运行时风险，如果实际状态仍为null，会直接抛出错误，仅适用于你能严格控制数据加载时机的场景。

方案4：拆分加载状态与数据 #

在Redux状态中新增一个标记字段，用来标识Targetfarms是否已加载完成：

interface InitialState {
  Targetfarms: Farmstype | null;
  isTargetFarmLoaded: boolean; // 新增加载状态标记
}

const initialState: InitialState = {
  Targetfarms: null,
  isTargetFarmLoaded: false,
};

const postSlice = createSlice({
  name: "post",
  initialState,
  reducers: {
    targetFarm(state, action: PayloadAction<Farmstype>) {
      state.Targetfarms = action.payload;
      state.isTargetFarmLoaded = true; // 赋值后标记为已加载
    },
  },
});

组件里通过加载标记判断，TypeScript会自动推断Targetfarms非空：

const MainPage = () => {
  const { Targetfarms, isTargetFarmLoaded } = useSelector((state: RootState) => state.post);

  if (!isTargetFarmLoaded) {
    return <div>加载中...</div>;
  }

  console.log("Targetfarms:", Targetfarms.placeId); // 无类型错误
  return <div>页面内容</div>;
};

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