如何解决React组件中TypeScript报错：类型'string'无属性'type'

一、TypeScript报错的解决方案 #

1. 增加类型守卫（快速修复） #

由于items现在是TeaserOne | TeaserTwo | string的联合类型，直接访问node.type会因为string类型没有该属性报错。可以通过类型守卫先排除string类型，再处理Teaser逻辑：

// 方式1：直接判断类型排除string
if (typeof node !== 'string' && node.type.includes('TeaserOne')) {
  const teaserOne = node as TeaserOneType;
  return (
    <TeaserOne
      key={teaserOne.id}
      url={teaserOne.url}
      title={teaserOne.title}
      // 其他props...
    />
  );
}

// 方式2：用类型谓词做更严谨的类型判断
function isTeaserItem(node: TeaserOne | TeaserTwo | string): node is TeaserOne | TeaserTwo {
  return typeof node !== 'string' && 'type' in node;
}

// 使用类型谓词
if (isTeaserItem(node) && node.type.includes('TeaserOne')) {
  const teaserOne = node as TeaserOneType;
  return <TeaserOne key={teaserOne.id} {...teaserOne} />;
}

2. 定义专属自定义元素类型（更优雅的方案） #

用string替代JSX是不严谨的，建议定义专门的类型来标记自定义元素，既符合类型安全，又语义清晰：

第一步：更新类型定义

// 定义自定义元素类型
type CustomGridItem = {
  __typename: 'CustomGridItem'; // 和Teaser的__typename区分开
  content: React.ReactNode;
};

// 更新SixGrid的Props类型
export type Props = {
  data: {
    title?: string | null;
    items: (TeaserOne | TeaserTwo | CustomGridItem)[];
  };
};

第二步：在父组件中替换元素

const MyCustomBlock = ({ customItems }: Props) => {
  if (!customItems?.length) return null;

  // 复制数组并替换第6个元素（索引5）
  const updatedItems = [...customItems];
  // 确保数组长度足够，避免索引越界
  if (updatedItems.length >= 6) {
    updatedItems[5] = {
      __typename: 'CustomGridItem',
      content: <div>你的自定义JSX内容</div>
    };
  }

  const newData = { items: updatedItems };
  return <SixGrid data={newData} />;
};

第三步：在SixGrid中处理自定义元素

// 先处理自定义元素
if (node.__typename === 'CustomGridItem') {
  return node.content;
}

// 再处理TeaserOne/TeaserTwo的原有逻辑
if (node.__typename.includes('TeaserOne')) {
  const teaserOne = node as TeaserOneType;
  return <TeaserOne key={teaserOne.id} {...teaserOne} />;
}

二、当前实现路径的合理性分析 #

直接修改数组元素再传给子组件的思路是可行的，但有几个优化点：

• 类型严谨性：原方案用string替代JSX属于类型“偷懒”，容易引发后续类型问题，用自定义类型替代是更规范的做法。
• 数组操作优化：原代码中的类型断言sixGridData as (RelatedItemTeaser | string)[]可以省略，直接基于customItems复制数组即可，同时要增加数组长度判断，避免索引越界（比如数组不足6个元素时，copyArray[5]会导致undefined被替换成string，引发意外问题）。
• 子组件职责权衡：如果SixGrid原本仅负责渲染Teaser列表，加入自定义元素后，需要确保子组件的逻辑清晰，不会破坏原有渲染逻辑。如果自定义元素的需求更复杂，也可以考虑在父组件中拆分数组（前5个元素 + 自定义元素 + 剩余元素），再组合渲染，但这会增加父组件复杂度，需根据实际场景选择。

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