React:将Api数据传递给数组|未定义‘不能赋值给类型'GridRowsProp’

interface GridRowsProp {
  id: number;
  name: string;
  // 其他字段
}

import React, { useEffect, useState } from 'react';
import axios from 'axios';

interface GridRowsProp {
  id: number;
  name: string;
  // 其他字段
}

const TableComponent: React.FC = () => {
  const [rows, setRows] = useState<GridRowsProp[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        const data: GridRowsProp[] = response.data;
        setRows(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          {/* 其他列 */}
        </tr>
      </thead>
      <tbody>
        {rows.map(row => (
          <tr key={row.id}>
            <td>{row.id}</td>
            <td>{row.name}</td>
            {/* 其他列 */}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default TableComponent;