React/TS传递OpenWeatherMap数据时如何解决TS2322错误

1. 初始State类型与组件Props要求不匹配 #

如果App组件中useState的初始值设为null或undefined，但WeatherCard组件的Props要求传入必选的WeatherDataObj类型，就会触发类型不匹配错误。

解决方式： #

• 渲染组件前先判断数据是否存在，避免传递空值：

// App.tsx
{weatherData && <WeatherCard data={weatherData} />}

• 或者调整WeatherCard的Props类型，允许接收空值：

// WeatherCard.tsx
import { WeatherDataObj } from './types';

interface WeatherCardProps {
  data: WeatherDataObj | null;
}

• 若能确保数据加载完成后才渲染组件，可使用非空断言（谨慎使用，避免空值报错）：

<WeatherCard data={weatherData!} />

2. 接口返回数据与WeatherDataObj类型定义不一致 #

OpenWeatherMap接口返回的部分字段可能是可选的，或字段名/类型与你定义的WeatherDataObj不匹配，导致setWeatherData后，weatherData的实际类型不符合预期。

解决方式： #

• 修正WeatherDataObj类型，将接口返回的可选字段标记为?:：

// types.ts
export interface WeatherDataObj {
  name: string;
  main: {
    temp: number;
    humidity?: number; // 接口返回可能缺失的字段
  };
  weather: Array<{
    main: string;
    description: string;
  }>;
}

• 使用类型守卫验证接口返回数据，确保符合类型定义后再更新状态：

// App.tsx
const fetchWeather = async () => {
  const res = await fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY');
  const rawData = await res.json();
  
  // 验证核心字段是否存在
  if (rawData.name && rawData.main?.temp && Array.isArray(rawData.weather)) {
    setWeatherData(rawData as WeatherDataObj);
  }
};

3. WeatherCard组件Props类型未正确关联WeatherDataObj #

若WeatherCard组件的Props类型未正确导入或引用types.ts中的WeatherDataObj，而是自行定义了相似但有差异的类型，也会导致类型不匹配。

解决方式： #

确保WeatherCard直接使用types.ts中定义的类型：

// WeatherCard.tsx
import { WeatherDataObj } from './types';

interface WeatherCardProps {
  data: WeatherDataObj;
}

export const WeatherCard = ({ data }: WeatherCardProps) => {
  return (
    <div>
      <h2>{data.name}</h2>
      <p>温度: {data.main.temp}°C</p>
    </div>
  );
};

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