如何通过字符串字段查询 Firestore 以获取文档（搜索引擎友好的 Slug）

Question

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

作为我的路线，我有：

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

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

当我在 Firestore 中查询数据库中存在的 slug 时，我没有从 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#notParsed。

Answer 2

您很可能正在使用最新版本的 React Router (v4+)。因为在较旧的 React Router 中，这是通过 props 使 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))

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