React函数组件传Props报错：隐式'any'类型问题求助

问题说明 #

在React TypeScript项目中，父组件App通过URL查询参数或Cookie获取bookmakerid并传递给子组件Home，但Home组件接收Props时持续报错：

• 解构接收时：Binding element 'bookmakerid' implicitly has an 'any' type
• 直接接收props对象时：Binding element 'props' implicitly has an 'any' type

报错原因 #

TypeScript的严格类型检查要求所有变量（包括组件Props）必须显式指定类型，不允许隐式推断为any类型。你的代码中未给Home组件的Props定义类型，触发了这个错误。

解决方案 #

方法一：定义Props接口（推荐，代码更易维护） #

在Home组件文件中，先定义Props的类型接口，再给组件参数指定该类型：

import React, { useEffect, useState } from 'react';
import "../App.css";
import { ICompetition } from '../interfaces/ICompetition';

// 定义Home组件的Props类型
interface HomeProps {
  bookmakerid?: number; // 可选类型，因为bookmakerid可能未被赋值
}

function Home({ bookmakerid }: HomeProps) {
  const [compList, setData] = useState<ICompetition | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 使用前先判断bookmakerid是否有效
    if (bookmakerid) {
      fetch(`http://localhost:5242/GetCompetitions?bid=${bookmakerid}`, { method: "GET" })
        .then(response => {
          if (response.ok) {
            console.log(response);
            return response.json();
          }
          throw new Error('Response not ok');
        })
        .then(data => {
          setData(data);
        })
        .catch(err => {
          setError(err);
        })
        .finally(() => {
          setLoading(false);
        });
    } else {
      setLoading(false);
      setError(new Error('Invalid bookmakerid'));
    }
  }, [bookmakerid]); // 将bookmakerid加入依赖数组，确保值变化时重新请求

  return (
    <section className="section section-variant-1 bg-gray-100">
      <div className="isotope-item" data-filter="football">
        <div className="sport-table">
          <div className="sport-table-tr">
            <div id="runnerContainer" className="carousel-inner"></div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default Home;

方法二：直接在参数上指定类型（快速实现） #

如果不想单独定义接口，可以直接在组件参数中指定类型：

function Home({ bookmakerid }: { bookmakerid?: number }) {
  // 组件逻辑同上
}

额外优化：父组件中bookmakerid的类型处理 #

父组件中当前的bookmakerid可能出现NaN或0的情况，建议优化类型定义，避免传递无效值：

function App() {
  const cookies = new Cookies();
  const query = new URLSearchParams(window.location.search);
  let bookmakerid: number | undefined;

  // 处理URL查询参数
  const bidFromQuery = query.get('bid');
  if (bidFromQuery) {
    const parsedBid = Number(bidFromQuery);
    if (!isNaN(parsedBid) && parsedBid > 0) {
      bookmakerid = parsedBid;
      cookies.set("bid", bookmakerid);
    }
  }

  // 处理Cookie
  if (!bookmakerid) {
    const bidFromCookie = cookies.get('bid');
    if (bidFromCookie) {
      const parsedBid = Number(bidFromCookie);
      if (!isNaN(parsedBid) && parsedBid > 0) {
        bookmakerid = parsedBid;
      }
    }
  }

  return (
    <div className="App">           
      <Helmet></Helmet>
      <Navbar />
      <div className="page bg-gray-100">
        <section className="section section-variant-1 bg-gray-100">
          <Home bookmakerid={bookmakerid} />
        </section>
      </div>
      <Footer />
    </div>
  );
}

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