TypeScript报错：string|string[]类型不存在split属性如何解决

TypeScript抛出这个错误的核心原因是：

• 你定义的border属性类型是string | string[]联合类型
• split()是字符串原型上的方法，string[]（字符串数组）类型不存在这个方法
• TS对联合类型做属性/方法校验时，要求该方法必须在联合类型的所有成员上都存在，只要有一个类型不满足就会抛错
• 从逻辑层面说，直接对可能是数组的值调用字符串方法，本身也存在运行时报错的风险。

通过类型守卫抹平类型差异，同时兼容单字符串、字符串数组两种入参场景，修复后的BorderItem.tsx代码如下：

import Link from 'next/link';
import React from 'react';
import { FC } from 'react';

interface Props {
  border: string | string[];
}

export const BorderItem: FC<Props> = ({ border }) => {
  // 类型收窄：统一转换为数组格式，后续处理时所有项都是string类型
  const borderItems = Array.isArray(border) ? border : [border];

  return (
    <>
      {borderItems.map((item) => {
        const [toShow, toSend] = item.split('/');
        return (
          <Link key={toSend} href={`/name/${toSend}`} passHref>
            <li>{toShow}</li>
          </Link>
        );
      })}
    </>
  );
};

修复说明 #

• 用Array.isArray()做类型判断，TS会自动识别收窄后的类型，后续遍历的每一项都是确定的string类型，调用split不会再有类型报错。
• 补全了多border场景的渲染逻辑：原代码如果传入数组，不仅会报类型错，也无法正确渲染多个边界国家项，修复后不管传入单个带/分隔的字符串，还是多个同格式字符串组成的数组，都能正常渲染。
• 补充了React列表渲染要求的唯一key属性，避免控制台渲染警告。

如果你业务中border永远只会传入字符串数组，不会传单个字符串，可以直接把Props的类型定义收紧，从根源避免类型问题：

interface Props {
  border: string[];
}

注意：如果你的borders字段是从第三方接口（比如REST Countries API）直接获取的，默认返回的是国家三位代码数组，不带/分隔符，需要确认你传入组件前是否已经做了显示名/跳转值的格式拼接，避免split后得到undefined导致跳转异常。

内容的提问来源于stack exchange，提问作者Mustafa Mert Göksu