Next.js+TypeScript渲染restcountries API数据时出现No overload matches this call报错

问题原因 #

1. 类型定义不够精确：你的Currency类型使用泛型字符串索引，TypeScript无法明确其包含的具体属性，导致Object.entries的类型推断出现问题。
2. 未处理可能的undefined值：ICurrencies接口允许值为undefined，Object.values(country.currencies)[0]可能返回undefined，TypeScript无法确保后续调用Object.entries的安全性，从而抛出重载不匹配错误。

解决方案 #

步骤1：优化类型定义

将Currency改为明确的接口，指定API返回的name和symbol属性，提升类型安全性：

interface Currency {
  name: string;
  symbol: string;
}

interface ICurrencies {
  [key: string]: Currency | undefined;
}

步骤2：添加安全检查并修正渲染代码

在渲染前确保第一个货币值存在，避免undefined导致的类型错误。可以通过过滤空值处理：

<td>
  {country.currencies && (
    () => {
      // 过滤掉undefined的货币项
      const validCurrencies = Object.values(country.currencies).filter(Boolean);
      if (validCurrencies.length === 0) return null;
      
      // 渲染第一个有效货币的所有属性
      return Object.entries(validCurrencies[0]).map(([key, value]) => (
        <li key={key}>
          {key}: {value}
        </li>
      ));
    }()
  )}
</td>

或者使用更简洁的空值合并语法：

<td>
  {country.currencies && Object.entries(Object.values(country.currencies)[0] ?? {}).map(([key, value]) => (
    <li key={key}>
      {key}: {value}
    </li>
  ))}
</td>

说明 #

• 优化后的类型定义让TypeScript清晰知晓Currency的结构，消除了泛型索引带来的类型模糊。
• 添加的安全检查确保只有存在有效货币数据时才执行渲染逻辑，彻底解决TypeScript的重载匹配错误提示，同时保持代码的动态性。

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