Gatsby动态渲染Link/div时to属性类型报错如何解决

问题根源 #

Gatsby 的 Link 组件要求 to 属性必须是有效值，不能接收 undefined；而原生 div 标签本身没有 to 属性，强行传递 to={undefined} 也会触发类型校验错误。

修复方法 #

用条件展开属性的方式，只有当 to 存在时才传递该属性，不存在就不传递任何额外属性即可：

import "./styles.css";
import { Link } from "gatsby";

export default function App() {
  const to = "/home";
  const Wrapper = to ? Link : "div";
  // 动态生成属性，无to时为空对象
  const props = to ? { to } : {};

  return (
    <Wrapper {...props}>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    </Wrapper>
  );
}

如果是 TypeScript 环境，加个简单的类型断言即可消除剩余类型警告：

import "./styles.css";
import { Link } from "gatsby";
import type { ComponentProps } from "react";

export default function App() {
  const to = "/home";
  const Wrapper = to ? Link : "div";
  const props = to ? { to: to as ComponentProps<typeof Link>['to'] } : {};

  return (
    <Wrapper {...props}>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    </Wrapper>
  );
}

逻辑说明 #

• 当 to 有值时，会给 Link 组件传递合法的 to 属性，符合组件类型要求
• 当 to 无值时，给 div 传递空对象，不会传入任何多余属性，规避原生标签的属性类型错误

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