如何查询Firestore以按字符串字段获取文档（搜索引擎友好的子弹）

Question

我在React中有一个名为ShowArticle的组件，我正在尝试通过名为slug的字符串字段在我的articles集中的Firestore中查询单个文档，以便可以将URL设置为//myhost.com/article/show/:slug slug是Firestore中匹配的唯一字符串。

作为路线，我有：

<Route exact path="/article/show/:slug" component={ShowArticle} />

所以我用const { slug } = props.match.params;正确获取了:slug参数const { slug } = props.match.params; 在ShowArticle组件内部。

当我向Firestore查询数据库中存在的块时，我没有收到来自Firestore的数据。

如何通过SEF URL的唯一字符串值检索文章文档？

我的ShowArticle组件如下：

 import React, { Component } from 'react'; import { connect } from 'react-redux'; import { compose } from 'redux'; import { firestoreConnect } from 'react-redux-firebase'; import { PropTypes } from 'prop-types'; import Article from "./Article"; class ShowArticle extends Component { render() { const { article } = this.props; if (article) { return ( <div> <Article key={article.id} title={article.title} date={article.date} body={article.body} /> </div> ); } else { return ( <div>Loading...</div> ) } } } ShowArticle.propTypes = { firestore: PropTypes.object.isRequired }; export default compose( firestoreConnect(props => { const { slug } = props.match.params; console.log(slug); return [ {collection: 'articles', storeAs: 'article', doc: slug } ] }), connect(({ firestore: { ordered } }, props) => ({ article: ordered.article && ordered.article[0] })) )(ShowArticle); 

Answer 1

在firestoreConnect()的回调中，将doc: slug更改为queryParams: [ 'equalTo=' + slug ]

因此，您将得到：

export default compose(
  firestoreConnect(props => {
    const { slug } = props.match.params;
    console.log(slug);
    return [
      {collection: 'articles', storeAs: 'article', queryParams: [ 'equalTo=' + slug ] }
    ]
  }),
  connect(({ firestore: { ordered } }, props) => ({
    article: ordered.article && ordered.article[0]
  }))
)(ShowArticle);

请参考文档中有关react-redux-firebase软件包的http://react-redux-firebase.com/docs/queries.html#notPars 。

Answer 2

很可能您正在使用最新版本的React Router（v4 +）。 因为在较旧的React Router中，这是使ID与道具一起可用的方法。 但是在更新的react-router库中，您必须使用“ withRouter”高阶组件包装整个组件。 每当渲染时，它将更新的匹配，位置和历史道具传递给包装的组件。

首先，您必须导入withRouter。

import { withRouter } from "react-router";

然后，您必须使用withRouter包装它。

 export default withRouter(compose(
  firestoreConnect(props => {
    const { slug } = props.match.params;
    console.log(slug);
    return [
      {collection: 'articles', storeAs: 'article', doc: slug }
    ]
  }),
  connect(({ firestore: { ordered } }, props) => ({
    article: ordered.article && ordered.article[0]
  }))
)(ShowArticle))

这对我来说就像一种魅力！