React Svg组件props为空、页面无法获取类型问题求助

针对你遇到的Svg组件props始终为空的情况，按以下步骤逐一排查：

1. 确认组件调用时是否传递了Props #

这是最常见的原因——如果使用组件时没有传入任何props，console.log自然会输出空对象。检查调用Svg的代码，确保传递了所需参数，比如：

// 正确示例：传递props
import Svg from './Svg';
import logoResource from './logo.svg';

function App() {
  return <Svg name="logo" resource={logoResource} style={{ width: 60 }} />;
}

如果只是写<Svg />，props必然为空。

2. 修正类型定义与PropTypes的不一致问题 #

你的代码中存在类型不匹配的情况，可能导致TS编译警告或运行时隐式错误：

• svgProps里resource定义为String，但组件中使用了props.resource.default，说明resource应该是一个带default属性的模块对象，而非字符串
• style属性在类型定义中未声明，但组件里直接使用了props.style
• PropTypes的定义和TS类型不匹配（resource在TS里是String，PropTypes里是Object）

修正后的类型和PropTypes如下：

import React from 'react';
import { Typography } from '@material-ui/core';
import PropTypes from 'prop-types'; // 需先安装prop-types包

type typeName = 'logo' | 'Admin' | 'Delete' | 'User';

type svgProps = {
  name?: typeName;
  resource?: { default: string }; // 匹配资源导入的结构
  getImage?: () => void;
  style?: React.CSSProperties; // 声明style类型
};

const Svg = (props: svgProps) => {
  console.log("Props:", props);
  if (props.resource) {
    return <img style={props.style} src={props.resource.default} />;
  }
  switch (props.name) {
    case 'logo':
      return <img style={props.style} alt="logo" />; // 建议添加alt属性
    default:
      return <Typography>Not Found</Typography>;
  }
};

// 修正PropTypes与TS类型一致
Svg.propTypes = {
  name: PropTypes.oneOf(['logo', 'Admin', 'Delete', 'User']),
  resource: PropTypes.shape({
    default: PropTypes.string.isRequired
  }),
  getImage: PropTypes.func,
  style: PropTypes.object
};

export { Svg };
export default Svg;

3. 检查路由中的组件渲染方式 #

如果是在React Router中加载Svg组件，确保传递props的方式正确：

• 错误写法（未传递props）：

<Route path="/svg" element={<Svg />} />

• 正确写法（直接传递props）：

import logoResource from './logo.svg';

<Route path="/svg" element={<Svg name="logo" resource={logoResource} />} />

如果需要从路由参数获取值，可在组件内使用useParams：

// 路由配置
<Route path="/svg/:name" element={<Svg />} />

// Svg组件内
import { useParams } from 'react-router-dom';

const Svg = (props: svgProps) => {
  const { name } = useParams<{ name: typeName }>();
  console.log("Route name:", name);
  // ... 后续逻辑
};

4. 排查是否有高阶组件/包装组件拦截Props #

如果Svg被其他组件包裹（比如布局组件、状态管理HOC），要确保这些组件将接收到的props透传给Svg：

// 错误示例：未透传props
const WrappedSvg = (props) => {
  return <Svg />;
};

// 正确示例：透传所有props
const WrappedSvg = (props) => {
  return <Svg {...props} />;
};

5. 验证组件导入是否正确 #

虽然你提到导出正常，但仍需确认导入方式与导出方式匹配：

• 使用默认导出时：import Svg from './Svg';
• 使用命名导出时：import { Svg } from './Svg';
  避免混用导致导入错误的组件实例。

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