在Vercel部署构建时遇到Type类型错误求助

错误原因 #

你遇到的TypeScript类型错误是因为React的ref回调函数要求返回值为*void或清理函数（无返回值的函数），但当前代码中的箭头函数(ref) => (node.current = ref)会返回赋值操作的结果（类型为HTMLDivElement | null），不符合LegacyRef<HTMLDivElement>*的类型约束。本地运行正常可能是因为TypeScript配置较宽松，而Vercel构建时启用了更严格的类型检查。

解决方案 #

以下几种方法都能修复这个问题：

• 修改回调函数，避免返回值：将箭头函数的括号改为花括号，确保不返回任何值：

  <div
    ref={(ref) => { node.current = ref; }}
    css={(theme) => ({
      width: !isTabletOrMobile ? "auto" : "100vw",
      height: "98%",
      // 其他样式配置
    })}
  />
  

• 直接传递ref对象：如果node是通过React.useRef<HTMLDivElement>(null)创建的，直接将node传给ref属性更简洁，无需手动编写回调：

  <div
    ref={node}
    css={(theme) => ({
      width: !isTabletOrMobile ? "auto" : "100vw",
      height: "98%",
      // 其他样式配置
    })}
  />
  

• 使用useCallback稳定引用（可选）：如果需要ref回调的引用保持稳定，可以用React.useCallback包裹，同时确保函数不返回值：

  const setNodeRef = React.useCallback((ref: HTMLDivElement | null) => {
    node.current = ref;
  }, []);
  
  // 在组件中使用
  <div
    ref={setNodeRef}
    css={(theme) => ({
      width: !isTabletOrMobile ? "auto" : "100vw",
      height: "98%",
      // 其他样式配置
    })}
  />
  

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